使用jQuery实现表单ajax提交.docx

使用jQuery实现表单ajax提交（不支持文件上传）有的童鞋可能会说了，不就是jQuery.post($(‘form’).attr(‘action’), $(‘form’). serialize(), function(response){})吗，谁不知道啊。呵呵，您了说的还真没错，核心确实是这个。但在真实项目中，这是远远不够的。在实际的开发中，ajax提交表单必须给当前访问者明确的指示，让访问者知道目前数据正在提交中，这是很基本的原则。其次，ajax提交表单应该能够对错误信息进行有效的反馈，不但利于调试，而且当意外发生时应该让访问者可以知道具体发生了什么。最后，就是应该具有一定的通用性和可扩展性。下面就介绍一下我编写的表单提交功能的jQuery代码。功能介绍我编写的这个表单提交代码包括以下功能：修改jQuery.ajax组件的全局配置，以便更好的进行错误处理；Ajax提交时显示表示“运行中”的图片，完成后自动隐藏；集成提示信息显示功能；表单提交，可以使用或不使用ajax提交表单，支持前置函数与回调函数，这样您可以在提交时附加额外的校验，提交后触发其他的处理。各部分的源码及介绍如下。jQuery.ajax的全局配置jQuery提供ajaxSetup方法来控制ajax对象的默认运行方式，我用它进行了如下配置：jQuery.ajaxSetup({ type: GET, //默认提交方式 complete: function(ajax) { //ajax提交完成时触发的事件，如果ajax对象具有fromTarget属性，那么使用自定义方法pBase.hideAjaxLoader隐藏它 if (ajax.fromTarget) { pBase.hideAjaxLoader(ajax.fromTarget); } }, error: function(ajax, error, errorMessage) { //错误处理，当错误产生时被触发 if (error == abort) { //错误类型为abort，即放弃本次操作，不做处理 return ajax; } if (error == error ! ajax.responseText) { //如果错误类型为error并且没有得到任何来自服务器的信息，那么不做处理 return ajax; } var content = ; if (ajax.responseText) { try { //用来处理json格式的服务器端信息 eval(content = + ajax.responseText); if (content.message) { if (content.errorMessage) { content = content.errorMessage; } else { content = content.message; } } else { content = ajax.responseText; } } catch (e) { if (errorMessage) { //errorMessage一般是由web服务器返回的异常信息，而不是服务器端脚本返回的异常 content = errorMessage; } else { content = ajax.responseText; } } } //调用自定义函数pBase.showAjaxMessage()来显示异常信息 pBase.showAjaxMessageBox(content, error); }});获取基本访问路径信息使用基本访问路径可以简化页面中的链接地址。代码如下。pBase.getBaseUrl = function() { if (!pBase._baseUrl) { pBase._baseUrl = $(base).attr(href); } return pBase._baseUrl; };自定义的ajax方法这里使用了特定格式的html，用来更美观的显示ajax运行标记。Js代码如下。 pBase.ajax = function(options, obj) { var ajax = $.ajax(options); if (obj) { pBase.showAjaxLoader(obj); ajax.fromTarget = obj; } return ajax; };Html代码示例如下。当ajax显示时，div.ajaxBox中的div.ajaxLoader16显示，其他隐藏，结束时执行相反的操作。如果您希望使用其他的方式，只要同时修改下节中说明的方法即可。div class=ajaxBoxdivbutton type=submit提交/buttonbutton type=