更多具体的可以参考jquery文档
$.ajax()方法概述
作用:发送Ajax请求。
其中data可以使用对象格式(会默认转化为字符串) 自动转换name=zhangsan&age=100
可以使用字符串格式
如果参数类型是json
contentType: 'application/json',
data需要 data: JSON.stringify(params),
beforeSend 在请求发送之前调用 也可以在函数外单独写成ajaxSuccess(callback)
success 请求发送成功调用 ajaxError(callback)
error:请求失败调用 传入的是xhr XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。
ajaxComplete(callback) :AJAX 请求完成时执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数。
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>请求完成.</li>");
});
ajaxSend(callback):AJAX 请求发送前执行函数。Ajax 事件。XMLHttpRequest 对象和设置作为参数传递给回调函数
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>开始请求: " + settings.url + "</li>");
});
ajaxStart(callback):AJAX 请求开始时执行函数。Ajax 事件。
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop(callback) AJAX 请求结束时执行函数。Ajax 事件。
$("#loading").ajaxStop(function(){
$(this).hide();
});
这些方法可以写成对应的事件格式 例如:
// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart', function() {
NProgress.start()
})
serialize方法:将表单的内容变成字符串
$("form").serialize()
serializeArray:将表单的内容变成数组 其中每个元素是对象类型 属性为表单的name 值为value 可以通过遍历变成对象格式
// 将表单中用户输入的内容转换为对象类型
function serializeObject(obj) {
// 处理结果对象
var result = {};
// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
var params = obj.serializeArray();
//得到的类型是数组 每一个元素是一个对象
// 循环数组 将数组转换为对象类型
$.each(params, function(index, value) {
result[value.name] = value.value;
})
// 将处理的结果返回到函数外部 返回的是一个对象
return result;
}
. g e t ( ) 、 .get()、 .get()、.post()方法概述
作用:
.
g
e
t
方
法
用
于
发
送
g
e
t
请
求
,
.get方法用于发送get请求,
.get方法用于发送get请求,.post方法用于发送post请求。
jQuery 1.12 中 jQuery.post 和 jQuery.get 支持对象参数,这样一来好处还比较多,比如设置回调函数的context,或者跨域 post 时可以withCredential: true
jQuery.get({
url: “/example”
});
jQuery.getJSON(url, [data], [callback]) 载入Json数据
jQuery.getScript(url, [callback]) 载入js文件
$.ajax发送jsonp请求
$.ajax({
url: '/jsonp',
// 向服务器端传递函数名字的参数名称 默认是callback
jsonp: 'cb',
//指定函数名称
jsonpCallback: 'fn',
// 代表现在要发送的是jsonp请求 发送什么请求用datetype控制
dataType: 'jsonp',
/*,
success: function (response) {
console.log(response)
}*/
})
原本默认的请求地址是 ?callback=函数名
但是如果之前用过Jsonp进行修改的话传递过去的就是 ?修改的值=函数名
这样的话服务器端就无法使用express已经封装好的jsonp函数
app.get('/jsonp', (req, res) => {
//因为发送请求的时候将callback改成了cb 所以不能直
//需要在.cb中获取到函数的名称
const cb = req.query.cb
const data = cb + "({name: 'zhaoliu'})"
res.send(data);
});