form表单的各种提交方式
发布日期:2021-10-12 20:07:59 浏览次数:5 分类:技术文章

本文共 2357 字,大约阅读时间需要 7 分钟。

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

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

   
    
  userName:
  passWord:
  

这里需要注意几点:

               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提交

   

  userName:
  passWord:
  

这里需要注意几点:

              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提交

   
    
  userName:
  passWord:
  

 

这里需要注意几点: 

              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提交

   

  userName:
  passWord:
  

这里需要注意几点: 

              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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Java 简单导出数据列表到excel中
下一篇:分布式,集群,他们的区别是什么?简单易懂,半分钟就OK

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.249.79.108]2022年04月15日 18时52分14秒