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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python中dict使用方法详解
2019/07/17 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Python学习笔记之装饰器
2020/08/06 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
档案接收函
2014/01/13 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
中考标语大全
2014/06/05 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
golang为什么要统一错误处理
2022/04/03 Golang
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers