Jquery ajax书写方法代码实例解析

更新时间：2020年06月12日 11:40:27 作者：路痴队长

这篇文章主要介绍了Jquery ajax书写方法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。

AJAX优点：

　　可以异步请求服务器的数据，实现页面数据的实时动态加载，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有：

async 是否异步执行，默认为True,千万不要指定为False
method 发送的Method,缺省为“GET”,可指定为‘POST','PUT','DELETE', 单词字母必须大写
contentType 发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为‘text/plain' 'application/json'
data 发送给后端的数据，可以是字符串、数组或对象。如果是GET请求，data将被转换成query附加到url上；如果是POST请求，根据contentType把data序列化成合适的格式
dataType 接收的数据格式，可以指定为'html' 'xml' 'json' 'text'等，缺省情况下根据响应的Content-Type猜测
headers 发送的额外的HTTP请求头，必须是一个Object

语法一：$.ajax({name:value, name:value, ...})

 # 登录js代码
 $(".form-login").submit(function (e) {
     e.preventDefault();
     mobile = $("#mobile").val();
     pwd = $("#password").val();
     var data = {
       mobile: mobile,
       pwd: pwd
     };
     $.ajax({
       url: "/api/***",
       type: "POST",
       data: JSON.stringify(data),
       contentType: "application/json",
       dataType: "json",
       headers: {"X-CSRFToken": getCookie('csrf_token')},
       success: function (resp) {
        if (resp.error == 0){
           // resp 是后端通过json.dumps()返回的json格式数据:res={"error":0, "errmsg":"登录失败"}
           // resp = json.dumps(res)
           // 请求成功，跳转页面
           location.href = '/'
         }
         else {
           alert(resp.errmsg)
         }
       }
     })
  })

语法二：$.get(URL, params, function(resp, status_code){})

　　　　URL必需参数；

　　　　params可选参数，params={key:value...}, 会以?key=value&key=value...的方式自动添加到URL后面　　

　　　　function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省

 # 更新首页房源展示信息
 var params = {
     aid: 0,
     sd: "2018-2-20",
     ed: "2019-2-29",
     page: 1
   };
 $.get("/api/v1_0/houses", params, function(resp){
     if (resp.error == 0){
       $(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
     }
     else {
       $(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
     }
   })

语法三：$.post(URL, data, function(resp, states_code){})

　　　　URL必选参数；

　　　　data 可选参数连同请求发送的数据；

　　　　function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省

$("button").click(function(){
  $.post("/try/ajax/demo_test_post.php",
  {
    name:"mjy",
    url:"https://cnblogs.com/We612/"
  },
    function(data,status){
      alert("数据: \n" + data + "\n状态: " + status);
  });
});

说明：　　

　　$.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

　　$.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

　　实际应用中多用到语法一语法二，语法三较少

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery layui常用方法介绍
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验，接下来通过本文给大家介绍layui常用方法，需要的朋友参考下
2016-07-07
基于jquery的回到页面顶部按钮
昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了
2011-06-06
jquery清空textarea等输入框实现代码
jquery清空textarea等输入框在工作中很常见，接下来的代码简单实用，感兴趣的朋友可以参考下哈，希望对你有所帮助
2013-04-04
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
这篇文章主要介绍了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果,实例分析了tytabs.jquery.min.js插件实现tab选项卡切换效果的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
jQuery动画效果animate和scrollTop结合使用实例
animate是jq的一个特效的函数方法，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。
2014-04-04
推荐17个优美新鲜的jQuery的工具提示插件
在web开发当中，工具提示条对于完善web网站的用户体验至关重要。title属性通常是用来帮助用户了解显示链接的信息
2012-09-09
Jq通过td获取同行其它列td的方法
下面小编就为大家带来一篇Jq通过td获取同行其它列td的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
jquery手机触屏滑动拼音字母城市选择器的实例代码
下面小编就为大家分享一篇jquery手机触屏滑动拼音字母城市选择器的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
Jquery给基本控件的取值、赋值示例
这篇文章主要介绍通过Jquery如何给基本控件的取值、赋值,需要的朋友可以参考下
2014-05-05
AJAX在JQuery中的应用详解
今天小编就为大家分享一篇关于AJAX在JQuery中的应用详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01

Jquery ajax书写方法代码实例解析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具