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表单的各种提交方式相关推荐

form表单的多种提交方式
在项目开发中自己总结的form表单的集中提交方式: 1,<input type="submit"> 提交按钮提交表单. 例: <!DOCTYPE html> ...
form表单的多种提交方式及提交前验证
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习 1.无任何验证提交(最普通的提交) ...
form表单—2种提交方式
只提交参数到后台,不接收返回值 html代码  <form id="editForm" action=&qu ...
form表单用butten提交后无反应表单提交三种方式
form表单用butten提交后无反应&表单提交三种方式一,表单提交无反应有时候,我们发现表单提交的butten按钮,根本就没niao用.鼠标都点烂了,也提交不上去.找了半天什么错误也没找 ...
uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少前端代码举例后端代码举例 form表单元素较多前端代码举例: 后端java代码举例 uni-app提交f ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
php表单转json对象,form表单转Json提交的方法(推荐)
form表单转Json提交的方法(推荐) 先将表单数值转换成数组存储,存储成的格式为[{"name":"","value":"&q ...
Form表单之get提交与post提交
Form表单之get提交与post提交 Form表单的属性action 与method: 属性值 ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

form表单的各种提交方式

form表单的各种提交方式相关推荐

最新文章

热门文章