在JQuery中实现Ajax编程
Jquery中关于Ajax编程的一些方法:
<1> load()方法
<2> $.get()方法
<3> $.post()方法
<4> $.getJSON()方法
<5> $.ajax()方法
<1>调用load()方法可以动态地从服务器加载数据，并填充调用它的HTML元素的内容，语法如下：
#(选择器).load(url[, data ] [, complete(responseText,textStatus,XMLHttpRequest)] )
参数说明如下。
url：需要加载的资源的url。
data：可选参数，在提交请求时发送到服务器的数据对象或字符串。
complete(responseText,textStatus,XMLHttpRequest)：可选参数，请求结束后，调用的回调函数。示例:
<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('div').load('test.txt');
});
});
</script></span></span>
load()方法去是从缓存中加载数据而不是向服务器加载数据。因此，在调用load方法之前应该执行下面的代码方法禁止load方法调用IE缓存文件(注意是load()方法，而非之后的get、post方法，在这两个方法之前设置禁止缓存会报错)：
<span style="font-size:18px;"><span style="font-size:18px;">$.ajaxSetup({
cache:false
});
</span></span>
<2>使用$.get()方法可以通过HTTP GET请求从服务器加载数据，语法如下：
jQuery.get(url[, data ] [, success(data,textStatus,jqXHR)] [,dataType ] )
参数说明如下：
url：需要加载的资源的url。
data：可选参数，在提交请求时发送到服务器的数据对象或字符串。
success(data,textStatus,jqXHR)：可选参数，请求成功后，调用的回调函数。
可以看出来 $.get()方法是一个JQuery的全局函数，所以不能指定当前的选择器选择元素，然后填充，这里与上面的$().load有很大区别。
<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.get('test.txt',
function(data){
alert("获取的数据是"+data);
});
});
});
</script></span></span><3>使用$. post ()方法可以通过HTTP POST请求从服务器加载数据，语法如下：
jQuery.post(url[, data ] [, success(data,textStatus,jqXHR)] [,dataType ] )
参数说明与$.get()方法的参数相同也可以用这样的风格编写代码
<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.post('test.txt')
.done(function(data){//表示post()方法执行完成之后的回调函数，或者写 .success(function());
alert("获取的数据是"+data);
});
});
});
</script></span></span><4>使用$.getJSON()方法可以通过HTTP GET请求从服务器加载JSON编码格式的数据，语法如下：
jQuery.getJSON(url[, data ] [, success(data,textStatus,jqXHR)] )
参数说明如下：
url：需要加载的资源的url。
data：可选参数，在提交请求时发送到服务器的数据对象或字符串。
success(data,textStatus,jqXHR)：可选参数，请求成功后，调用的回调函数。
<span style="font-size:18px;"><span style="font-size:18px;"><script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON('edit.json')
.success(function( data ){
alert(data[0].src);
});
});
});
</script></span></span><5>$.ajax()方法
()方法
调用$.ajax ()方法可以执行异步HTTP（Ajax）请求，语法如下：
jQuery.ajax(url[, settings ]
参数说明如下。
url：需要发送异步HTTP（Ajax）请求的url。
settings：用于配置Ajax请求的一组“键/值”对。
<span style="font-size:18px;"><span style="font-size:18px;"><script>
$(document).ready(function(){
$("button").click(function(){
htmlobj=$.ajax({
url:'jquery.js',
async:false
});
$('div').html(htmlobj.responseText);
});
});
</script></span></span><6>利用ajax提交表单
<span style="font-size:18px;"><span style="font-size:24px;"><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var formdata=new FormData();
$("button").click(function(){
formdata.append('name', 'lee');
formdata.append('age', 38);
$.ajax({
type:'POST',
url:"ShowInfo.php",
data:formdata， contentType:false, //必须false才会自动加上正确的Content-Type
processData:false //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
}).then(function(){
alert("ok");
},function(){
alert("Failed");
});
return false;
});
});
</script>
服务器端为showInfo.php
<span style="font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?PHP
$file=@fopen("file.txt","a+");
@fwrite($file,"username: " . $_POST['name'] . "; " . "age: " . $_POST['age']);
@fclose($file);
?></span>
Ajax事件:
|
ajaxStart |
全局事件 |
当开始一个ajax请求且没有其他ajax请求时触发 |
|
beforeSend |
局部事件 |
ajax请求开始前触发 |
|
ajaxSend |
全局事件 |
发送ajax请求时触发 |
|
success |
局部事件 |
只有ajax请求成功时才触发（服务器没有返回错误，数据也没有错误） |
|
ajaxSuccess |
全局事件 |
ajax请求成功时触发 |
|
error |
局部事件 |
ajax请求发生错误时触发 |
|
ajaxError |
全局事件 |
ajax请求发生错误后触发 |
|
complete |
局部事件 |
ajax请求完成时触发 |
|
ajaxComplete |
全局事件 |
ajax请求完成时触发 |
|
ajaxStop |
全局事件 |
当没有个更多的ajax请求时触发 |
ajax事件流:
<span style="font-size:18px;"><span style="font-size:24px;">$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});</span></span>
全局事件可以在document对象上触发，并使用bind()方法绑定到处理函数
<span style="font-size:18px;"><span style="font-size:24px;">$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});</span>
</span>为您的图片添加Fancybox效果:
注意要先引入Jquery包，以及Jquery插件:jquery.fancybox.js以及附带的css样式
<span style="font-size:18px;"><span style="font-size:24px;"><a href="image url" data-fancybox-group='gallery' class="test" ><image src="image url"></a> </span></span>
<span style="font-size:18px;"><span style="font-size:24px;"><script type="text/javascript">
$(document).ready(function(){
$('.test').fancybox();
});
</script></span></span>
