Jquery基于Ajax方法自定义无刷新提交表单Form实例
本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法。分享给大家供大家参考。具体实现方法如下：
Jquery的$.ajax方法可以实现ajax调用，要设置url,post,参数等。
如果要提交现有Form需要写很多代码，何不直接将Form的提交直接转移到ajax中呢。
以前的处理方法：
如Form代码如下：
<formid="Form1"action="action.aspx"method="post"> 名称：<inputname="name"type="text"/><br/> 密码：<inputname="password"type="password"/><br/> 手机：<inputname="mobile"type="text"/><br/> 说明：<inputname="memo"type="text"/><br/> <inputtype="submit"value="提交"/> </form>
当提交后，会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。
思考：
如果不想刷新页面使用ajax，就又要在$.ajax中指定url,等信息，不好维护。
在网上查了一下，老早以前老外就有解决方案了。使用ajax直接按照Form信息直接提交。不刷新页面。
参考资料：http://jquery.malsup.com/form/
很好用，但我还是愿意自己写个自己用的。
核心JS代码:
//将form转为AJAX提交
functionajaxSubmit(frm,fn){
vardataPara=getFormJson(frm);
$.ajax({
url:frm.action,
type:frm.method,
data:dataPara,
success:fn
});
}
//将form中的值转换为键值对。 functiongetFormJson(frm){ varo={}; vara=$(frm).serializeArray(); $.each(a,function(){ if(o[this.name]!==undefined){ if(!o[this.name].push){ o[this.name]=[o[this.name]]; } o[this.name].push(this.value||''); }else{ o[this.name]=this.value||''; } });
returno; }