杰晶网络

Jquery ajax书写方法代码实例解析
网络编程 2024/12/29 佚名
3 2

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...}, 会以"htmlcode"> 

 # 更新首页房源展示信息
 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,ajax书写
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“Jquery ajax书写方法代码实例解析”
暂无“Jquery ajax书写方法代码实例解析”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网