jQuery方式实现ajax接口调用
0. serialize() serializeArray()
// jQuery为了我们能够简便的操作表单，设置了两个方法用于对表单数据进行处理
// 1 serialize()
// - 可以将一个表单的数据转换为urlencoded形式的数据
// - 还可以直接作为$.ajax的参数使用
// 2 serializeArray()
// - 可以将一个表单的数据转换为数组形式
// - 也可以直接作为$.ajax的参数使用
// 小结：
// - 如果仅仅需要进行表单的数据处理，直接使用serialize()即可 （常用）
// - 如果要查看数据内容，可以使用serializeArray()
// - 以前我们说表单提交不好用只是说提交后会跳转导致页面刷新，用户体验不好，请求次数过多
// - 但是表单自身的功能还是无可取代的，该用还要用
注意：通过$.ajax发送FormData请求时，需要指定两个属性，不设置会导致报错
contentType:false; //不指定请求体内容类型
processData: false; //不进行数据处理操作
FormData的参数需要一个DOM对象，需要转换后使用
1.
<body>
<form id="form">
<input type="text" name="username">
<input type="file" name="file">
<input type="button" value="按钮" id="btn">
</form>
</body>
<script>
$('#btn').on('click', function(){
var fd = new FormData($('form')[0])
$.ajax({
method: 'post',
url: '',
data: fd,
contentType: false,
processData: false,
success: function(res){
console.log('res')
}
});
})
2.
jsonp和ajax没有任何关联，jQuery为了我们请求操作时的统一，将jsonp的发送方式设置在了$.ajax中
$('#btn').on('click', function () {
$.ajax({
method : 'POST'
url : 'http://localhost/Ajax_day4/demo1.php',
success : function (datas) {
console.log(datas);
},
// 如果在dataType中设置'jsonp'，表示当前请求以jsonp形式发送，与dataType的原始功能无关
dataType : 'jsonp'
});
}
3. ajax设置请求头
$.ajax({
type: type,
headers: {
'token':'token_value'
},
url: url,
data: data,
success: function(data) {
},
error: function(err) {
},
complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
}
});
