使用jQuery实现表单ajax提交
使用jQuery实现表单ajax提交（不支持文件上传）
有的童鞋可能会说了，不就是jQuery.post($(‘form’).attr(‘action’), $(‘form’).serialize(), function(response){})吗，谁不知道啊。呵呵，您了说的还真没错，核心确实是这个。但在真实项目中，这是远远不够的。
在实际的开发中，ajax提交表单必须给当前访问者明确的指示，让访问者知道目前数据正在提交中，这是很基本的原则。其次，ajax提交表单应该能够对错误信息进行有效的反馈，不但利于调试，而且当意外发生时应该让访问者可以知道具体发生了什么。最后，就是应该具有一定的通用性和可扩展性。
下面就介绍一下我编写的表单提交功能的jQuery代码。
功能介绍
我编写的这个表单提交代码包括以下功能：
1.修改jQuery.ajax组件的全局配置，以便更好的进行错误处理；
2.Ajax提交时显示表示“运行中”的图片，完成后自动隐藏；
3.集成提示信息显示功能；
4.表单提交，可以使用或不使用ajax提交表单，支持前置函数与回调函数，这样您可
以在提交时附加额外的校验，提交后触发其他的处理。
各部分的源码及介绍如下。
jQuery.ajax的全局配置
jQuery提供ajaxSetup方法来控制ajax对象的默认运行方式，我用它进行了如下配置：
1.jQuery.ajaxSetup({
2.type: "GET", //默认提交方式
https://www.360docs.net/doc/e013828477.html,plete: function(ajax) {
4.//ajax提交完成时触发的事件，如果ajax对象具有fromTarget属性，那么
使用自定义方法pBase.hideAjaxLoader隐藏它
5.if (ajax.fromTarget) {
6.pBase.hideAjaxLoader(ajax.fromTarget);
7.}
8.},
9.error: function(ajax, error, errorMessage) {
10.//错误处理，当错误产生时被触发
11.if (error == 'abort') {//错误类型为abort，即放弃本次操作，不做处理
12.return ajax;
13.}
14.if (error == 'error'&& ! ajax.responseText) {//如果错误类型为error并且没有
得到任何来自服务器的信息，那么不做处理
15.return ajax;
16.}
17.var content = '';
18.if (ajax.responseText) {
19.try {
20.//用来处理json格式的服务器端信息
21.eval('content = ' + ajax.responseText);
22.if (content.message) {
23.if (content.errorMessage) {
24.content = content.errorMessage;
25.} else {
26.content = content.message;
27.}
28.} else {
29.content = ajax.responseText;
30.}
31.} catch (e) {
32.if (errorMessage) {
33.//errorMessage一般是由web服务器返回的异常信息，而不
是服务器端脚本返回的异常
34.content = errorMessage;
35.} else {
36.content = ajax.responseText;
37.}
38.}
39.}
40.//调用自定义函数pBase.showAjaxMessage()来显示异常信息
41.pBase.showAjaxMessageBox(content, error);
42.}
43.});
获取基本访问路径信息
使用基本访问路径可以简化页面中的链接地址。代码如下。
1.pBase.getBaseUrl = function() {
2.if (!pBase._baseUrl) {
3.pBase._baseUrl = $('base').attr('href');
4.}
5.return pBase._baseUrl;
6.};
自定义的ajax方法
这里使用了特定格式的html，用来更美观的显示ajax运行标记。Js代码如下。
1.pBase.ajax =function(options, obj) {
2.var ajax = $.ajax(options);
3.if (obj) {
4.pBase.showAjaxLoader(obj);
5.ajax.fromTarget = obj;
6.}
7.return ajax;
8.};
Html代码示例如下。当ajax显示时，div.ajaxBox中的div.ajaxLoader16显示，其他隐藏，结束时执行相反的操作。如果您希望使用其他的方式，只要同时修改下节中说明的方法即可。
1.
2.
3.
4.
5.
6.
7.
显示/隐藏ajax运行标记
Js代码如下。您可以自行修改它们使其匹配您的页面元素。很简单的代码，不用多说，不是吗。
1.pBase.showAjaxLoader =function(obj) {
2.obj = $(obj);
3.obj.each(function() {
4.var item = $(this).parents('.ajaxBox:first');
5.item.children('*').hide();
6.item.children('.ajaxLoader16, .ajaxLoader32, .ajaxLoader64').show();
7.});
8.};
9.pBase.hideAjaxLoader =function(obj) {
10.obj = $(obj);
11.obj.each(function() {
12.var item = $(this).parents('.ajaxBox:first');
13.item.children('*').show();
14.item.children('.ajaxLoader16, .ajaxLoader32, .ajaxLoader64').hide();
15.});
16.};
显示提示信息
下面是源码，不多说了，其实就是很简单的使用js动态创建html元素而已。哦，说一句吧，如果显示的是错误信息需要用户手动关闭这个提示信息，否则5秒后自动消失。
1.pBase.showAjaxMessageBox = function(html, error) {
2.var box = $('
');3.var contentBox = $('
');4.var closeButton = $('
');5.closeButton.click(function() {
6.$(this).parents('div.ajaxMessageBox:first').remove();
7.});
8.var id = 'ajax_' + (new Date()).getTime().toString();
9.box.attr('id', id);
10.contentBox.html(html);
11.if (error) {
12.box.addClass('error');
13.} else {
14.setTimeout('$("#' + id + '").remove()', 5000);
15.}
16.box.append(contentBox);
17.box.append(closeButton);
18.if ($('#ajaxMessagesBox').length < 1) {
19.$('body').prepend('
');20.}
21.$('#ajaxMessagesBox').append(box);
22.};
Ajax提交表单
一大堆铺垫之后正菜来了。pBase.submitForm方法允许提供4个参数：
1．form: 要提交的表单；
2．useajax: 是否使用ajax提交；
3．validatorFn: 额外的校验函数，我们为其提供参数form，并要求其返回值为true或false；
4．callbackFn: 回调函数，我们为其提供的参数与jQuery.ajax中success事件得到的参数一致。
源码如下。
1.pBase.submitForm =function(form, useajax, validatorFn, callbackFn) {
2.form = $(form);
3.var elementClass = 'formElement';//我的特定表单格式
4.var errorClass = 'error'; //我的特定表单格式
5.var isValid = true;//数据有效性
6.var objs = form.find('input[required=1], textarea[required=1]');//必填项
7.var button = form.find('button[type=submit]'); //提交按钮
8.if (!useajax) {
https://www.360docs.net/doc/e013828477.html,eajax = false;
10.}
11.//对必填项进行校验，其实对于大部分浏览器来说这一步已经完全可以省略了
12.objs.each(function() {
13.var obj = $(this);
14.if (obj.val().length < 1) {
15.obj.parents('.' + elementClass + ':eq(0)').find('.' +
errorClass).html(pBase.translate('isEmpty'));
16.isValid = false;
17.}
18.});
19.var objs = form.find('input[sameas]');//我的特定格式，表示该元素的值应该与
sameas属性指定的目标一致，用于确认密码，确认邮箱等。
20.objs.each(function() {
21.var obj = $(this);
22.if (obj.val() != obj.parents('form:eq(0)').find('input[name=' + obj.attr('sameas')
+ ']').val()) {
23.obj.parents('.' + elementClass + ':eq(0)').find('.' +
errorClass).html(pBase.translate('Invalid Repeat'));//pBase.translate()用于翻译字符串，本文未列出该方法
24.isValid = false;
25.}
26.});
27.if (isValid&& $.isFunction(validatorFn)) {
28.isValid = validatorFn(form);//调用附加的校验函数对表单进行校验
29.}
30.if (!isValid) {
31.returnfalse; //校验失败，返回false
32.}
33.if (useajax) { //如果使用ajax提交的话那么这里开始进行提交了
34.if (!$.isFunction(callbackFn)) {
35.callbackFn = function(response) {};//如果没提供回调函数就声明一个
空函数
36.}
37.var actionUrl = form.attr('action');
38.if (actionUrl[0] != '/') {
39.actionUrl = pBase.getBaseUrl() + actionUrl;//如果目标地址不是绝对路
径那么自动补全它
40.}
41.pBase.ajax({
42.type: 'POST',
43.url: actionUrl,
44.type: form.attr('method').toUpperCase(),
45.data: form.serialize(),
46.success: function(response, textStatus, xmlHttpRequest) {
47.form.find('div.error').text('');
48.callbackFn(response, textStatus, xmlHttpRequest);
49.}
50.}, button);//将提交按钮传递过去，这样就能显示提交中咯
51.}
52.return !useajax;//如果是ajax提交返回false阻止表单自身的提交，否则返回
true
53.};
范例
以上代码可以配合如下的html代码使用。代码很乱哈，见谅，因为是php生成的，所以格式不会太好。
1.
2.
15.
16.
17.
18.
19.昵称长度不少于4个字符（两个汉字）
20.
21.
22. id="user-screen_name" value="Nick" helper="formText" required="1">