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.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python创建文件备份的脚本
2018/09/11 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
Shell如何接收变量输入
2016/08/06 面试题
环境建设实施方案
2014/03/14 职场文书
司法所长先进事迹
2014/06/02 职场文书
公司会议开幕词
2016/03/03 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS