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


Posted in jQuery onJune 12, 2020

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 相关文章推荐
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 #jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
You might like
PHP 反向排序和随机排序代码
2010/06/30 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
《小池塘》教学反思
2014/02/28 职场文书
广告语设计及教案
2014/03/21 职场文书
商业项目策划方案
2014/06/05 职场文书
班主任工作实习计划
2015/01/16 职场文书
自我推荐信格式模板
2015/03/24 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android