本篇博客目的是:在OA系统十九:请假功能五遇到了【layui.$.post():layui内置的jQuery的Ajax函数:向后台发起post请求;】;对此不太明白,故而本篇博客专门介绍jQuery中Ajax发起请求的内容。
首先,关于jQuery和Ajax可以参考:JQuery对Ajax的支持:简介$.ajax(jsonExpression);JQuery对Ajax简化和封装简单示例;以及附近相关文章。;
然后,本篇博客内容还好,快速浏览效果更佳;
然后,本篇博客的启示就是,以后貌似可以尽量使用【$.post()、$.get()】代替【$.ajax()】啦;毕竟【$.post()、$.get()】更简洁;
注:本篇博客只是介绍了jQuery中Ajax函数最基础的东西;关于其很多细节,比如很多参数和特殊情况下的设置细节尚不明确;
目录
(3)【$.post() 方法】与【$.ajax()方法】的关系
(3)【$.get() 方法】与【$.ajax()方法】的关系
0.预先介绍: jQuery AJAX 方法
● AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分(ajax是内嵌在浏览器中的一种技术)。jQuery中内置的Ajax,本篇博客主要展示【jQuery调用最常见的三种Ajax请求方法】。
● 首先,【$.ajax()、$.post()、$.get()】这三个方法都是Ajax方法中一种与服务器交换数据的请求类型。$.post() 是post请求时的$.ajax()的简写形式;$.get() 是get请求时的$.ajax()的简写形式。
● jQuery AJAX 方法有很多种如下表(其中$.ajax()是万能的,是最基础,最全面的那个;剩余的方法都是针对某种特定场景下的$.ajax()的简化形式);本篇博客主要介绍$.ajax()、$.post()、$.get()这三个;
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项 |
$.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
$.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.param() | 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串) |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
ajaxError() | 规定 AJAX 请求失败时运行的函数 |
ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
serialize() | 编码表单元素集为字符串以便提交 |
serializeArray() | 编码表单元素集为 names 和 values 的数组 |
1.$.ajax() 方法
(1)$.ajax() 方法内容
与$.post()、$.get()相比,$.ajax()是全面的、基础的、甚至可以说是臃肿的,$.ajax()可以执行精确的需求控制。
ajax() 方法用于执行 AJAX(异步 HTTP)请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。这句话的意思是:
语法:
$.ajax({name:value, name:value, ... })
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
几点说明:
(1)如果请求成功会执行success方法;如果请求失败会执行error方法;
(2)$.ajax()如果不写error方法,可以使用return false,用来应对“请求失败后”的情况;
(2)$.ajax() 方法案例
案例1:在JQuery对Ajax的支持:简介$.ajax(jsonExpression);JQuery对Ajax简化和封装简单示例;中,$.ajax()方法使用了success方法,也使用了error方法;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.5.1.js" ></script> <script> $(function(){ // 创建一个页面就绪函数,其用途是在页面加载完毕后,执行这个function里面的代码; $.ajax({ "url":"/ajax/news_list", "type":"post", "data":"t=tiobe", "dataType":"json", // 在JavaScript中json的key可以不加引号,但是为了严谨和防止混乱,还是加上引号吧; "success":function(json){ console.log(json); for(var i=0;i<json.length;i++){ // append()的作用可以将append()中的html代码段追加到div的最后 $("#container").append("<h1>"+json[i].title+"</h1>"); } }, "error":function(xmlhttp,errorText){ // xmlhttp和errorText哪儿来的??? console.log(xmlhttp); console.log(errorText); if(xmlhttp.status == "405"){ alert("无效的请求方式"); }else if(xmlhttp.status == "404"){ alert("未找到url资源"); }else if(xmlhttp.status == "500"){ alert("服务器内部错误"); }else{ alert("其他异常"); } } }) }); </script> </head> <body> <div id="container"></div> </body> </html>
案例2:在OA系统九:用户登录二:实现用户登录的后台逻辑代码;完善前台登录页的提交和校验功能;中,登录页提交登录校验的部分就使用到了$.ajax()方法:
● return false作用:submit提交事件,如果返回的是true:表单就直接通过浏览器发送请求进行提交了;如果返回false:则阻止本次提交操作。
● $.ajax() 是最基础的、最全面的方法;$.post()和$.get()都是$.ajax()的简化形式;所以,可以认为【return false这种用法】也是$.ajax()开创的,$.post()和$.get()中的【return false】都是基于$.ajax()的;
2.$.post() 方法
(1)$.post() 方法内容
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法:
$(selector).post(URL,data,function(data,status,xhr),dataType)
可以发现,在请求成功后,会回调执行function()函数;请求失败后,也可以使用error方法去处理;
如案例1:
$.post("/url",{"data":"data"},function (datas) { }).error(function (xhr, status, info) { alert("error"); });
如在OA系统十九:请假功能五中的form.ftl:
……………………………………
再如案例2:
$.post('URL',$('form').serialize()),success(function(){ alert(请求成功后); }).complete(function({ alert(请求完成后); }).error(function (xhr, status, info) { if(xhr.status == 401){ //do something } })
(2)$.post() 方法案例
如在OA系统十九:请假功能五中请假表单的提交中就是用到了$.post() 方法:
(3)【$.post() 方法】与【$.ajax()方法】的关系
$.post() 是简写的 Ajax 函数,即下面是等价的:
$.post(URL,data,function(data,status,xhr),dataType)
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
总之,【$.post() 方法】就是(在post请求时)【$.ajax()方法】的简化形式啦。
3.$.get()方法
(1)$.get()方法内容
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法:
$.get(URL,data,function(data,status,xhr),dataType)
此处参考自:https://www.cnblogs.com/brisk/p/9698471.html;
传统的$get方法无法处理error(比如400),只能处理成功后的响应。
例如:
$.get("url",{data: value},function (data, status, jqxhr) { alert('保存成功');} );
此时,如果$.get()请求失败后,就无法进入function()方法了;如果希望在$.get()处理请求失败的情况,可以采取以下策略:
● 改用$.ajax(),里面有error回调方法;
● 另一种更简单的方法,jQuery1.5以上可以使用:使用fail()方法处理$.get()请求失败的情况:
$.get("url",{data: value},function (data, status, jqxhr) { alert('保存成功');} ).fail(function () { alert('保存失败'); });
(2)$.get() 方法案例
目前还没有遇到$.get()方法的案例;
(3)【$.get() 方法】与【$.ajax()方法】的关系
$.get() 是简写的 Ajax 函数,即下面是等价的:
$.get(URL,data,function(data,status,xhr),dataType)
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
总之,【$.get() 方法】就是(在get请求时)【$.ajax()方法】的简化形式啦。
本篇博客参考自:
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp;
https://www.runoob.com/jquery/jquery-ref-ajax.html;
同时也参考了: