之前我在博客中介绍了ajax的一些基本方法,在本篇博客中,我将介绍ajax的一些其他方法,以及ajax的表单序列化
1. 表单序列化
Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit 提交将数据传输到服务器端。如果使用 Ajax 异步处理的话,传统的做法是将每个表单元素逐个获取才方能提交。
<!--HTML代码-->
<form>
用户名:<input type="text" name="user" />
邮件:<input type="text" name="email" />
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
<input id="btn" type="button" value="提交" />
</form>
<div id="box"></div>
//JS代码
$(function () {
$('#btn').click(function () {
$.ajax({
type : 'POST',
url : 'user.php',
data : {
user : $('form input[name=user]').val(),
email : $('form input[name=email]').val(),
sex : $('form input[name=sex]').val()
},
success : function (response, status, xhr) {
$("#box").text(response);
},
});
});
});
//服务端PHP代码
<?php
if ($_POST['sex']=='male') {
$sex='先生';
}else{
$sex='女士';
}
echo $_POST['user'].$sex.",您好!".' 您的邮箱是: '.$_POST['email'];
?>
最后运行结果为:
这种传统做法在发送的data较少时,也是比较方便。但是当表单元素特别多的情况下,需要将表单数据一一列出的话就比较麻烦,而且容易出错。另外当有多个表单时,我们在复制提交的JS代码时,需要改动的data属性也会比较多。
使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用 Ajax 请求。.serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉列表框等内容。因此上述的JS代码部分可以改写成如下:
$(function () {
$('#btn').click(function () {
$.ajax({
type : 'POST',
url : 'user.php',
data : $('form').serialize(),
success : function (response, status, xhr) {
$("#box").text(response);
},
});
});
});
经过序列化之后,发送的是一个由键值对组成的字符串。除了.serialize()方法,还有一个可以返回 JSON 数据的方法:.serializeArray()。这个方法可以直接把数据整合成键值对的 JSON 对象。
$(function () {
$('#btn').click(function () {
$.ajax({
type : 'POST',
url : 'user.php',
data : $('form').serializeArray(),
success : function (response, status, xhr) {
$("#box").text(response);
},
});
});
});
如果我们是在同一个程序中要多次调用$.ajax()方法,而每个很多参数都相同。为了避免重复写相同的参数,这个时候我们可以使用 jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。使用方法如下:
$(function () {
$('#btn').click(function () {
$.ajaxSetup({
url: 'user.php',
type: 'POST',
data : $('form').serialize(),
});
$.ajax({
success : function (response, status, xhr) {
$("#box").text(response);
},
});
});
});
2. ajax的一些其他全局请求事件
除了之前介绍的一些ajax的基本方法,这里,我将介绍一下 Ajax 的另外的一些全局请求事件。
2.1 .ajaxStart()和.ajaxStop()
在 Ajax 异步发送请求时间较长时,由于是异步请求,不会重新加载整个页面,因此客户并不知道是否请求发送成功,这样用户的体验将会降低。因此,如果在请求期间能给用户一些提示,比如:正在努力加载中…,那么相同的请求时间会让用户体验更加的好一些。
要实现上述功能,我们先定义一个<span>
标签
<p class="loading" style="display: none; color: red; font-weight: bold">
正在加载中...
</p>
然后通过.ajaxStart()和.ajaxStop()和控制其什么时候隐藏什么时候出现。
$(document).ajaxStart(function(){
$('.loading').show();
}).ajaxStop(function(){
$('.loading').hide();
});
只要用户触发了 Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。但是,有些情况下的ajax我们并不希望它触发全局时间,这时可以用$.ajax()的global属性进行取消,如下:
$.ajax({
global : false
});
2.2 .ajaxError()
当Ajax进行异步请求出现错误时,我们需要把错误报告出来,提醒用户重新提交或提示开发者进行修补。如果是使用$.ajax()方法进行的异步请求,$.ajax()提供了一歌属性方法来显示错误error:function(){};
$.ajax({
url: 'user3.php',
type: 'POST',
data : $('form').serialize(),
success : function (response, status, xhr) {
$("#box").text(response);
},
error : function(xhr, errorText, errorType){
alert(errorText+":"+errorType+"; "+xhr.status);
},
});
如果是使用在上层封装的方法比如$.get()、$.post()和.load(),是没有回调错误处理的。不过可以通过连缀处理使用局部.error()
方法(可用.fail()
方法替代)。
$.post('user4.php').error(function(xhr, errorText, errorType) {
alert(errorText+":"+errorType+"; "+xhr.status);
});
早期,通过全局.ajaxError()事件方法来返回错误信息
$(document).ajaxError(function(event,xhr,settings,info){
alert(xhr.status+":"+xhr.statusText);
});
2.3 .ajaxSuccess()
全局事件,请求成功完成时执行。对应上层封装方法比如$.get()、$.post()和.load()的一个局部方法:.success()
(可用.done()
替代);对应$.ajax()方法的一个属性方法:success : function(){};
2.4 .ajaxComplete()
全局事件,请求完成后注册一个回调函数,不管失败或成功。对应上层封装方法比如$.get()、$.post()和.load()的一个局部方法:.complete()
(可用.always()
替代);对应$.ajax()方法的一个属性方法:complete : function(){};
2.5 .ajaxSend()
全局事件,请求发送之前要绑定的函数。对应上层封装方法没有对应的局部方法;对应$.ajax()方法的一个属性方法:beforeSend : function(){};
注意这几个事件的先后顺序beforeSend->success/error->complete
$.ajax({
url: 'user.php',
type: 'POST',
data : $('form').serialize(),
success : function () {
alert('请求成功后!');
},
error : function(){
alert('请求失败后');
},
complete : function(){
alert('请求完成后,不管是否失败成功');
},
beforeSend : function(){
alert('发送请求之前执行');
},
});