使表单支持异步提交

每次页面中写异步请求时需要写一些重复性的代码，为什么html的表单不支持异步请求呢？无奈只好自己扩展一个了

先设计最终的使用效果

1. 给表单一个class标记，标识它使用ajax提交，class名就定为"ajaxForm"吧
2. 请求的url使用form的action，数据使用表单中元素的数据
3. 在form标签中加入一个onSuccess属性用来处理成功后逻辑，
   处理成功后首先弹出服务器返回的消息，
   有时希望跳转页面onSuccess="redirect::URL"，
   有时希望执行函数onSuccess="function:方法名"

最终效果

<form class="ajaxForm" action="URL" onSuccess="redirect:http://www.qq.com"><input type="text" name="name"/><input type="submit" value="提交"/></form>

<form class="ajaxForm" action="URL" onSuccess="function:fun1"><input type="text" name="name"><input type="submit" value="提交"/></form><script>//data为服务器返回的数据function fun1(data){alert(data.code)}</script>

实现同样的功能下，代码能少则少，多一行则多一份维护量，这才是程序员该有的懒样。

封装代码

$(window).on("submit","form.ajaxForm",function(){var $form=$(this);//支持jquery validate表单验证if(typeof $form.valid=="function"){//如果表单验证失败，不进行ajax请求if(!$form.valid()){return false;}}var beforeSubmit=$form.attr("beforeSubmit");if(beforeSubmit){var isContinue=(eval(beforeSubmit))();if(isContinue!=true){return false;}}var $submitBtn=$form.find(":submit,:button");$submitBtn.attr("disabled","disabled");$.post($form.attr("action"),$form.serialize(),function(data){$submitBtn.removeAttr("disabled");//ajax返回的数据需为json格式data=JSON.parse(data);if(data.message){alert(data.message);}//ajax返回的数据需有code属性，表明服务器处理是否正确if(data.code!="200"){return false;}var onSuccess=$form.attr("onSuccess");//ajax成功后事件if(onSuccess){var funPrefix="function:";var rediPrefix="redirect:";//执行某个函数if(onSuccess.startsWith(funPrefix)){var funName=onSuccess.substr(funPrefix.length);eval(funName)(data);}//调转到某个地址else if(onSuccess.startsWith(rediPrefix)){var rediURL=onSuccess.substr(rediPrefix.length);location.href=rediURL;}}});//防止表单提交return false;});