本文主要是介绍js异步提交form表单的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.定义异步提交表单的方法 （通用方法） /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如：URLDecoder.decode(param,"UTF-8")</strong></span>* @应用场景 需要用在form 的 onsubmit事件当中，并且确保方法最后恒久返回false* @return 必须返回false 用于阻止表单刷新提交 * */function ajaxSubmitForm(options){var form1 = options['form'];var ajax_url = $(form1).attr('action'); //表单目标 var ajax_type = $(form1).attr('method'); //提交方法 var ajax_data = $(form1).serialize(); //序列化表单数据 //解码防止中文乱码ajax_data = decodeURIComponent(ajax_data,true); ajax_data = encodeURI(encodeURI(ajax_data))$.ajax({ type:ajax_type, //表单提交类型 url:ajax_url, //表单提交目标 data:ajax_data, //表单数据dataType:'json',success:options['success']}); return false; //阻止表单的默认提交事件 };
2.应用场景案例：
<html>
<script type='javaScript'>
//表单验证并提交-->处理 function exeSubmit(form1){//可以在此添加校验return ajaxSubmitForm({form:form1,success:function(data){data = eval("("+data+")");if(data&&data.status == 'success'){alert("新增成功！");window.location.href='<%=basePath%>xxx.action';}else{alert("新增失败！");}} });}
</script><body>
<form action="xx.action" method="post" οnsubmit="return <span style="font-family: Arial, Helvetica, sans-serif;">exeSubmit(this);</span><span style="font-family: Arial, Helvetica, sans-serif;">">
</span>elements <span style="font-family: Arial, Helvetica, sans-serif;">.......</span><input type='submit' value="提交"/>
</form></body>
</html>
这篇关于js异步提交form表单的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
