jQuery实现form表单基于ajax无刷新提交方法详解

这篇文章主要介绍了jQuery实现form表单基于ajax无刷新提交方法,结合实例形式分析了jQuery使用$.ajax()方法实现无刷新提交的详细步骤与实现技巧,并附带了一个较为完整的实例供大家参考,需要的朋友可以参考下

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考，具体如下：

首先，新建Login.html页面：

    body { font-size: 13px; } .divFrame { width: 225px; border: solid 1px #666; } .divFrame .divTitle { padding: 5px; background-color: #eee; height: 23px; } .divFrame .divTitle span { float: left; padding: 2px; padding-top: 5px; } .divFrame .divContent { padding: 8px; text-align: center; } .divFrame .divContent .clsShow { font-size: 14px; line-height: 2.0em; } .divFrame .divContent .clsShow .clsError { font-size: 13px; border: solid 1px #cc3300; padding: 2px; display: none; margin-bottom: 5px; background-color: #ffe0a3; } .txt { border: #666 1px solid; padding: 2px; width: 150px; margin-right: 3px; } .btn { border: #666 1px solid; padding: 2px; width: 50px; }     用户登录    名称： 密码：  &nbsp 

然后，新建Login.aspx，接收并处理数据：

补充：form使用AJAX提交完整实例：

 //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //将form中的值转换为键值对 function getFormJson(frm){ var o={}; var a=$(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 || ''; } }); return o; } /* //前台调用方式 function autoSubmitFun(){ ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){}); } */ 

希望本文所述对大家jQuery程序设计有所帮助。

以上就是jQuery实现form表单基于ajax无刷新提交方法详解的详细内容，更多请关注本站其它相关文章！