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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery冲突问题解决方法
Jan 19 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python批量查询域名是否被注册过
2017/06/21 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python 画出来六维图
2019/07/26 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
学雷锋活动总结范文
2014/04/25 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
就业意向书范本
2015/05/11 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
科普 | 业余无线电知识-波段篇
2022/02/18 无线电