form表单的各种提交方式

2021-10-07 00:00:00 提交 方式 表单

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("网络出现异常,请稍后重新发布!!!!")
        }
    });

});
})

后台参数接收同上

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

    原文作者:熬耶
    原文地址: https://blog.csdn.net/qq_39772439/article/details/90750183
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。

相关文章