Web前端-ajax实现表单提交-by 大家学分享站


相信有很多学过html的,都知道提交表单常见的几种方式。这里总结一下,最平常的直接submit按钮提交就不说了。

一、不使用submit按钮的submit提交

这个标题看起来有些别扭,但实际中确实有这样的需求,我们要在提交表单时进行验证,验证通过才提交,否则不提交。可以用下面代码实现:
这是比较基础的一种实现方法。注意这时就不需要再form标签 上加action属性,地址填在这里的url就好。onSubmit是在表单提交的同时执行的方法,$(this).form(“validate”)用的是easyui的表单验证,验证失败则不提交。

  1. $("#fm").form("submit",{
  2.         url:url,
  3.         onSubmit:function(){
  4. return $(this).form("validate");
  5.         },
  6.         success:function(result){
  7. var result=eval('('+result+')');
  8. if(result.status=="success"){
  9.                 $.messager.alert("系统提示","保存成功!");
  10.                 resetValue();
  11.                 $("#dlg").dialog("close");
  12.                 $("#dg").datagrid("reload");
  13.             }else{
  14.                 $.messager.alert("系统提示","保存失败!名称或编号已存在");
  15. return;
  16.             }
  17.         }
  18.      });

二、普通ajax提交

这也是很常见的写法,不过表单在这里就失去意义了。
当然可以使用$(“form”).serialize()直接序列化表单内容放在data里面,就不用这样一个个添加。

  1. $.ajax({
  2.                 url:"../add_stu.do",
  3.                 type:"post",
  4.                 dataType:"json",
  5.                 data:{
  6.                     id:id,
  7.                     name:name,
  8.                     birth:birth,
  9.                     sex:sex,
  10.                     tel:tel,
  11.                     email:email,
  12.                     address:address,
  13.                     classid:classid
  14.                 },
  15.                 success:function(data){
  16. if(data.status == "success"){
  17.                         $('#add_dlg').dialog('close');
  18.                         $.messager.show({
  19.                             title : '提示',
  20.                             msg : '添加成功'
  21.                         });
  22.                         $('#dg').datagrid('load', {});
  23.                     }else{
  24.                         $.messager.show({
  25.                             title : '提示',
  26.                             msg : '添加失败,请联系管理员 ------'
  27.                         });
  28.                     }
  29.                 },
  30.                 error:function(){
  31.                         $.messager.show({
  32.                             title : '提示',
  33.                             msg : '系统错误,请联系管理员------'
  34.                         });
  35.                 }
  36.             });

三、使用jquery.form.js进行表单提交

上面的使用$选择器和ajax的毫无疑问要引入jquery.min.js,但使用这种方法还要引入一个jquery.form.js
这种方式算是正宗的表单ajax提交

  1. var form = $("#addcompany");
  2.             form.ajaxSubmit({
  3.                 type : "post",
  4.                 url : "${ctx}/company/addCompany.do",
  5.                 data : $.param({
  6.                     dealType : dealType
  7.                 }),
  8.                 dataType : "json",
  9.                 success : function(data) {
  10. if (data == "exist") {
  11.                              $.messager.alert("系统提示","公司名称已存在,请重新输入!");
  12.                     } else {
  13.                          $.messager.alert("系统提示","公司添加成功");
  14.                         initCompany();
  15.                         $("#company_info").dialog("close");
  16.                     }
  17.                 },
  18.                 error : function() {
  19.                 }
  20.             });

 

声明:大家学-卢卫湘|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Web前端-ajax实现表单提交-by 大家学分享站


加vx: beyonds 备注:app上架 lwxshow