目录
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是load(),$.get()和$.post()方法,第三次是$.getScript()和$.getJSON()方法。
$.get()
该方法使用GET方法进行异步请求。
参数
url 请求的HTML页的URL地址
data(可选) Object类型,发送到服务器的key/value数据作为String附加到请求URL中
callback(可选) 载入成功的回调函数
type(可选) 服务器端返回内容的格式(期待服务器端返回的数据格式并不是设置)
$('button').click(function(){
$.get('test.json',function(data){
$.each(data,function(index,item){
html+='<div><p>'+item["username"]+'</p><p>'+item["age"]+'</p></div>'
});
$('body').append(html);
});
});
<button>加载</button>
**:如果本地访问JSON文件则不要使用谷歌(存在跨域问题)
$.post()
该方法与get()请求参数与使用方法相同,但也有区别:
1.GET请求会将参数跟URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送到Web服务器。
2.GET请求方式对传输的数据大小有限制(2KB),而POST方式传递的数据量比GET方式大得多。
3.GET方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史记录中读取,因此安全性很低,而POST方式相对可以避免这些问题。
4.GET方式和POST方式传递的数据在服务器端的获取不同。
$.getScript()
该方法用于直接加载js文件,而且加载完后javascript文件会自动执行。
$.getJSON()
该方法用于加载JSON文件,与$.getScript()方法的用于相同。
$('button').click(function(){
$.getJSON('test.json',function(data){
$.each(data,function(index,item){
html+='<div><p>'+item["username"]+'</p><p>'+item["age"]+'</p></div>'
});
$('body').append(html);
});
});
<button>加载</button>
$.ajax()
常用的参数
url 发送请求的地址,字符串类型
type 请求方式(POST或GET)默认GET.
data 发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。
dataType 预期服务器返回的数据类型,如果不指定,将自动根据HTTP包MIME信息返回responseText
complete 请求完成后,调用的回调函数(无论成功或失败)
success 请求成功时调用的回调函数,参数data(处理后的数据),textStatus(描述状态)
error 请求失败时调用的函数。
timeout 设置请求超时间。
$('button:contains(加载数据)').click(function() {
$('.user').empty();
$('<tr><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr>').appendTo('.user');
$.ajax({
url: 'http://120.78.164.247:9999/user/findAll',
mthod: 'get',
dataType: 'JSON',
success: function(res) {
console.log(res);
res.data.forEach(function(element, index) {
// statements
$('<tr><td><input type="checkbox" value="' + element.id + '" ></td><td>'
+element.name + '</td><td>' + element.gender +
'</td><td><button>删除</button></td></tr>').appendTo('.user');
});
},
error: function() {}
});
})
序列化元素
serialize()
该方法作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串
$(function(){
$('#send').click(function(){
var $result=$("#form1").serialize();
console.log($result);
});
})
<form id="form1">
<label for="username">姓名:</label>
<input type="text" name="username" id="username">
<label for="age" >年龄:</label>
<input type="text" name="age" id="age">
<input type="button" value="提交" id="send">
<!-- <button id="send">提交</button> -->
</form>
**:复选框和单选框的值序列化为字符串形式,只会将选中的值序列化。
serializeArray()
将DOM元素系列化后,返回JSON格式的数据。
$(function(){
$('#send').click(function(){
var $result=$("#form1").serializeArray();
console.log($result);
});
})
$.param()
用来对一个数组或对象按照key/value进行序列化。
var arr={a:1,b:2,c:3};
var $result=$.param(arr);
console.log($result); //a=1&b=2&c=3