form表单的各种提交方式

form表单提交方法很多。直接提交啊，或者js提交啊。

第一种提交方式：form表单直接提交

<form action="formDate" method="post">
      userName:<input type="text" name="name">
      passWord:<input type="password" name="passWord">
      <inputype="submit" value="提交" />
</form>

这里需要注意几点：

               1. action标签必须写，这里面写的时提交的接口名称

               2.method标签也必须写，这里面写的时提交方式，get或者post.一般都是post，关于为什么,百度get和post的区别。

              3.input文本框中name属性必须写，因为form表单就是根据它提交的。

              4.最后提交类型一定要是submit

后台接受：

 @RequestMapping(value="formDate",method=RequestMethod.POST)
 public String getExecl(String userName,String passWord) throws IOException{
	   //此处由您提供
	 }

第二种提交方式：serialize ajax提交

<form>
      userName:<input type="text" name="name">
      passWord:<input type="password" name="passWord">
      <inputype="button" value="提交" id="btn"/>
</form>

这里需要注意几点：

              1.input文本框中name属性必须写，因为form表单就是根据它提交的。

              2.最后提交类型可以是submit也可以是button，这里是根据id提交的

$("#btn").click(function() {
 $.ajax({
    type: 'post',
    url: 'formDate',
    data: $("form").serialize(),
    success: function(obj) {
        if (obj == "success") {
            layer.alert('添加提交成功！',
            function(index) {
                window.location.reload();
            });
        } else {
            layer.alert("添加提交失败")
        }
    },
    error: function(obj) {
        layer.alert("网络出现异常，请稍后重新发布！！！！")
    }
});
})

这里Ajax提交时，直接通过$(“form”).serialize()，把userName，passWord的值传到后台，这个页面一个form表单，如果多个，就要给表单个id，根据id提交。例如：form表单id为formOne那么：$(“formOne”).serialize()

后台如何接收：

  和第一种方法一致。

第三种提交方式：ajaxForm提交

<form action="" method="post" id="formId">
      userName:<input type="text" name="name">
      passWord:<input type="password" name="passWord">
      <inputype="submit" value="提交" id="btn"/>
</form>

这里需要注意几点： 

              1.method标签也必须写，这里面写的时提交方式，get或者post.一般都是post，关于为什么,百度get和post的区别。

              2.input文本框中name属性必须写，因为form表单就是根据它提交的。

              3.最后提交类型可以是submit也可以是button，这里是根据id提交的

$("#btn").click(function() {
    $("#formId").ajaxForm({
        beforeSend: function() {},
        type: "POST",
        url: "formDate",
        success: function(result) {
            if (result == "success") {
                layer.alert('添加提交成功！',
               
            } else {
                layer.alert("添加提交失败，请重新提交")
            }
        },
        error: function(result) {
            layer.alert("网络出现异常，请稍后重新发布！！！！")
        }
    });

});

后台参数接收同上 

第四种提交方式：根据属性id提交

<form>
      userName:<input type="text" id="name">
      passWord:<input type="password" id="passWord">
      <inputype="button" value="提交" id="btn"/>
</form>

这里需要注意几点： 

              1.input文本框中id属性必须写，因为form表单就是根据id提交的。

              3.最后提交类型可以是submit也可以是button，这里是根据id提交的

js:

$("#btn").click(function() {
    var userName = $("#userName").val();
    var passWord = $("#passWord").val();
    $.ajax({
        url: "formDate",
        dataType: "text",
        type: "post",
        cache: false,
        data: {
            userName: userName,
            passWord: passWord,
        },
        success: function(obj) {
            if (obj == "success") {
                layer.alert('添加成功！',
                function(index) {
                    window.location.reload();
                });
            } else {
                layer.alert("添加失败，请重新发布")
            }
        },
        error: function(obj) {
            layer.alert("网络出现异常，请稍后重新发布！！！！")
        }
    });

});
})

后台参数接收同上

目前经常用的就这几种，第二，三种，较好用。若有不足之处，欢迎提出。

今天的文章form表单的各种提交方式分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。