您现在的位置:首页 >> 网页设计 >> JavaScript >> 内容

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

时间:2020-7-16 10:19:44

  核心提示:Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用。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, ...})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 登录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是自动生成的响应状态码,可缺省

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 更新首页房源展示信息
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是自动生成的响应状态码,可缺省

1
2
3
4
5
6
7
8
9
10
$("button").click(function(){
  $.post("/try/ajax/demo_test_post.php",
  {
    name:"mjy",
  },
    function(data,status){
      alert("数据: \n" + data + "\n状态: " + status);
  });
});

说明:  

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计
  • 晋公网安备 14042902000001号