js异步提交form表单的解决方案

来源：互联网发布：聚划算抢购技巧知乎编辑：程序博客网时间：2024/04/29 09:39

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" onsubmit="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>

0 0