ajax - 基于jQuery的介绍

Posted 2020-10-03

Ajax基础补充

XMLHttpRequest对象有以下属性和操作
属性：
onreadystatechange
readyState
status
操作：

jQuery的ajax操作，常用函数如下：

$.ajax([options]) //底层的ajax方法
$.get(url, [data], [fn], [type]) //基于get的ajax
$.post(url, [data], [fn], [type]) //基于post的ajax
load(url, [data], [callback]) //这个是对象调用的方法(上面的是全局方法)，可以是get或post


上面4个函数相关参数的解释：

url：请求路径
data：向服务器提交的数据
fb/cllback：回调函数，有三个参数 function(resp, textStatus, xmlHttp)，相当于xmlhttp.onreadystatechenge = function(){}
data：服务器返回的数据
info：返回的状态
xmlHttp：ajax引擎对象
注意：get和post中的回掉函数只有请求成功才会执行
type：返回的数据类型
options：json格式的参数集合



函数逐个介绍：

$.ajax([options])方法
该方法参数是一个json对象，对象中的参数以键值对形式存放，常用参数如下：

async：默认为true，表示异步，设置为false则表示请求同步（给予jQuery validate的ajax表单校验时需要设置为同步）
data：发送到服务器的数据，会自动转换为请求字符串格式，如果是get还会自动添加到url后面
dataType：预期服务器返回的数据类型，若不指定则根据服务器中返回的MIME类型（如application/json）自动判断
type：提交方式，get或post
url：请求地址
success：请求成功后的回调函数，格式为function(resp, textStatus, xmlHttp)
error：请求失败后的回调函数，格式为function(xmlHttp, textStatus, exception)
contentType：像服务器发送的数据类型，用于data是json串的时候


$.get(url, [data], [fn], [type])方法
get提交方式
回调函数格式为：function(resp, textStatus, xmlHttp)

$.post(url, [data], [fn], [type])方法
与get提交方法相同 只不过的提交方式是post

load(url, [data], [callback])

回调函数格式为：function(resp, textStatus, xmlHttp)

此方法是所有ajax操作方法中唯一对象调用的方法，其他都是全局方法
如果提交时携带了请求参数(json数据格式或key/value字符串)，即data部分存在即为post提交，data部分不存在即为get提交
在将服务器返回的json格式的字符串转换成json格式对象时的格式是eval("("+json+")");
原因是：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，
所以必须强制性的将它转换成一种表达式，因此要添加额外的()

表单序列化问题

如果想让表单通过ajax异步提交，那么首先我们要通过js获取到每个表单中输入的值，
如果表单项比较多的话，想必又是一件很麻烦，很痛苦的事情，
此时我们可以通过jquery的表单序列化的操作将表单的数据拼接成提交的参数格式
即：name=value&name=value&name=value 或者 json格式对象

var res = $("表单的选择器").serialize(); //可以获得表单的请求