jeasyui制作计划-ajax学习
Ajax:可以无刷新状态更新页面,并且实现异步提交,提升了用户的体验。
1.load()函数的使用,可以三个参数:url(必须的参数,请求html文件的url地址,参数类型string)、date(可选,发送的key/value数据,参数类型Object)、callback(可选,成功或失败的回调函数,参数类型为函数Function)。
1)只有一个参数
//HTML <input type="button" value="异步获取数据“ /> <div id="box"></div> //jQuery $('input').click(function(){ $('#box').load('test.html'); //函数中只有一个参数url。 });
2)传递两个参数url和data。
//jQuery
$('input').click(function(){
$('#box').load('test.php',{
url:'parameter'
}); //函数中只有两个参数url和传进的data参数parameter。
});
3)传递三个参数url和data和回调函数。
$('input').click(function () {
$('#box').load('test.php', {
url : 'parameter'
}, function (response, status, xhr) {
alert('返回的值为:' + response + ',状态为:' + status + ',状态是:' + xhr.statusText);
});
});
2、$.get和$.post方法
.load()方法是局部方法,必须包含一个元素作为jQuery对象作为前缀。而$.get()和$.post是全局方法,
不需要指定某个元素。就应用而言,.load()适合做静态文本的异步获取,而对于需要传递参数到服务其
页面的,$.get()和$.post()更加合适。
1)$.get()方法有四个参数,前三个参数和.load()一样,第四个参数为type,即服务器返回的内容格式:
包括xml、heml、script、json、jsonp和text。第一个参数为必选参数,后面三个为可选参数。
//使用$.get()异步返回html类型
$('input').click(function){
$.get('test.php',{
url:'parameter'
},function(response,status,xhr){
if(status =='success'){
$('#box').html(response);
}
})
});
说明:第四个参数type是指异步返回的类型。一般情况下type是智能判断的,不需要我们主动设置。
2)$.post()方法的使用和$.get()基本是一致的
使用时的主要区别:get方式通过$_GET[]获取,post方式通过$_POST[]获取。
//使用$.post()异步返回html
$.post('test.php',{
url:'parameter'
},function(response,status,xhr){
$('#box').html(response);
});
3.$.getScript()和$.getJSON()
//点击按钮加载js文件
$('input').click(function(){
$.getScript('test.js');
});
//$.getJson()方法是专门加载JSON文件的,使用方法和之前的类似。
$('input').click(function(){
$.getJSON('test.json',function(response,status,xhr){
alert(response[0].url);
});
});
4.$.ajax() 是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。
//$.ajax使用
$('input').click(function(){
$.ajax({
type:'POST',
url:'test.php',
data:{
url:'parameter'
},
success:function(response,stutas,xhr){
$('#box').html(response);
}
});
});
Ajax 调用wcf服务的方法
链接:http://pan.baidu.com/s/1nuENB9f 密码:f6d0