jQuery不仅对JavaScript语言进行了封装,也对Ajax异步交互进行了封装,jQuery提供了6个Ajax操作的方法:
1.load()方法
2.$.get()方法和$.post()方法
3.$.ajax()方法
4.$.getScript()方法和$.getJSON()方法
jQuery除了封装了六个Ajax操作的方法,还提供了一下几种事件:
1.ajaxStart()和ajaxStop()事件
2.ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件
load()方法
load()方法是jQuery中最为简单的Ajax方法
/*load(url,data,callback)方法
参数:
url:异步请求的地址
data:异步请求的数据
如果省略请求数据的话,当前的请求方式为GET
如果发送请求数据的话,当前的请求方式为POST
callback:异步请求成功后的回调函数
返回值:服务器端的响应结果
注意:自动将返回结果写入到目标元素中
*/
//html代码:
<button></button>
//JavaScript代码:
$('button').click(function(){
$('button').load('data/server.json',function(){
console.log('异步请求成功....');
});
});
get()方法
/*
$.get(url,data,callback,type)方法:请求方式为GET
参数:
url:异步请求的地址
data:异步请求的数据
callback:异步请求成功后的回调函数
type:设置服务器端响应结果的格式
xml、html、script、json、text等
*/
$.get('data/server.json',{name:'张三'},function(data){
console.log(data);
},'json');
post()方法
/*
$.post()方法:请求方式为POST
参数:
url:异步请求的地址
data:异步请求的数据
callback:异步请求成功后的回调函数
type:设置服务器端响应结果的格式xml、html、script、json、text等
*/
$.post('data/server.json',{name:"张三"},fucntion(data){
console.log(data);
},'json');
ajax()方法
/*
$.ajax(url,[settings])方法
参数:
url:请求地址
settings:设置异步请求的参数
settings选项:对象类型
type:设置请求方式
data:发送给服务器端的请求数据
dataType:服务器端响应结果的格式
success:异步请求成功后的回调函数
function(data,textStatus,jqXHR){}
data:表示服务器响应的结果
textStatus:表示服务器端当前的状态
jqXHR:Ajax中的核心对象
*/
$.ajax('data/server.json',{
type:'get',
dataType:'text',
success:function(data){
console.log(data);
}
});
getScript()方法
html代码:
<button>按钮</button>
JavaScript代码:
$('button').click(function(){
//动态加载指定JavaScript文件,并且执行
$.getScript('data/server.js',function(data){
console.log(data);
})
});
getJSON()方法
html代码:
<button>按钮</button>
JavaScript代码:
$('button').click(function(){
//getJSON()方法的请求方式为GET
$.getJSON('data/server.json',{name:'张三'},function(data){
console.log(data);
})
});
表单序列化
专门针对表单的方法,可以快速获取表单input里面的value,但是必须在表单中添加name属性,否则获取不到
html代码:
<form>
<input type='text'>
<input type='password'>
<input type='submit'>
</form>
JavaScript代码:
$('form').bind('submit',function(event){
//阻止提交按钮的默认行为
event.preventDefault();
//表单序列化:根据表单默认同步提交获取数据的方式
//var data=$('form').serialize();
var data=$('form').serializeArray();
//通过一部交互提交表单
$,post('data/server,json',data,function(data){
console.log(data);
});
});
18 天前