关于我们经常用到的form表单提交
工作中遇到了太多太多的表单提交问题，曾经学过一个HTML的表单提交给
另外一个HTML页面，对于后台怎么获取有点想不起来了。
今天便做了几个实验，提交订单到后台，来掩饰后台如何接受表单内容；
实验 一：
<form id="myform" action="/login/abc" method="post">
<p>联系人：<input type="text" name="name" style="width: 300px" /></p>
<p>电话：<input type="text" name="tel" style="width: 300px" /></p>
<p><input type="submit" value="提交" /></p>
</form>
后台是如何接收的呢；
@Controller
@RequestMapping(value = "/login")
public class LoginController {
@RequestMapping(value = "/abc")
@ResponseBody
public void login(String name){
System.out.println(name);
System.out.println(tel);
}
输入：周杰伦
123456
点击提交按钮：
输出：周杰伦
123456
没有问题。
实验二：
<form id="myform" action="/login/abc" method="post">
<p>联系人：<input type="text" name="name" style="width: 300px" /></p>
<p>电话：<input type="text" name="tel" style="width: 300px" /></p>
<p><input type="submit" value="提交" /></p>
</form>
后台现将name,和tel属性封装成一个类person
public class Person {
private String name;
private String tel;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}
}
后台代码
@Controller
@RequestMapping(value = "/login")
public class LoginController {
@RequestMapping(value = "/abc")
@ResponseBody
public void login(Person person){
System.out.println(person.getName());
System.out.println(person.getTel());
}
依然成功；
实验三 表单的ajax提交；（重点）
1.用其他的按钮代替提交按钮。
<body>
<form id="my" action="/login/abc" method="post">
<p>联系人：<input type="text" name="name" style="width: 300px" /></p>
<p>电话：<input type="text" name="tel" style="width: 300px" /></p>
<p><input type="submit" value="提交" /></p>
</form>
<input type="button" onclick="ck();" value="登录"/>
</body>
我们在form标签的外面再加一个按钮（登录）；实现点击登录按钮也提交。这时候需要在登录按钮添加方法，方法中写上
$("#my").submit()；
<script th:inline="javascript">
function ck(){ $("#my").submit()
}
</script>
那么如何实现ajax提交呢。
function ck(){
$.ajax({
url:"/login/abc",
type:"post",
dataType:"json",
data:$("#my").serializeArray(),
success:function(person){
console.log(person.name);
}
})
}
重点重点重点：
data:$("#my").serializeArray(),
关于我们经常用到的form表单提交的更多相关文章
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- SpringMVC中使用bean来接收form表单提交的参数时的注意点
这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
随机推荐
- 和Java相关的书籍，想成为架构师的请收藏一下啊
1.<<Effective Java 中文第二版>> 2.<<Java并发编程实践>> 3.<<Java核心技术(原书第8版)卷I_基础知识 ...
- CodeSmith7 系列 破解教程
CodeSmith[点此下载] 学过三层的人应该认识CodeSmith Generator吧,今天我就跟大家一起探讨下CodeSmith Generator 7.0.2的激活,这最新版本破解的难度也是 ...
- Mybatis框架的多对一关联关系（六）
一.一对多的关联映射 一对多关联查询多表数据 1接口 public interface IDeptDAO { //根据部门编号查询该部门单个查询 public Emp getEmpById(Integ ...
- 关于Three.js基本几何形状之SphereGeometry球体学习
一.有关球体SphereGeometry构造函数参数说明 <1>.SphereGeometry(radius, widthSegments, heightSegments, phiStar ...
- iOS空心圆下载进度指示器控件
self.layer = [CAShapeLayer layer]; self.layer.frame = CGRectMake(, , , ); self.layer.position = self ...
- .a静态库构架合成
一.如果类库生成的构架和对应设备的构架不一致,会链接报错 如果项目中使用类库后,遇到形似Undefined symbols for architecture x86_64(x86_64架构下有未定义的 ...
- c#下volatile关键字
volatile多用于多线程的环境,当一个变量定义为volatile时,读取这个变量的值时候每次都是从momery里面读取而不是从cache读.这样做是为了保证读取该变量的信息都是最新的,而无论其 ...
- Linux：常用命令
文件压缩.解压 网络.进程 磁盘.文件使用情况 内存使用 1.文件压缩.解压 1)tar.gz文件解压: .bin.tar.gz 解压到指定目录: (指定的目录是存在的) .bin. 2)zip 文件 ...
- php将对象数组转成普通数组
不知道为什么,把数组序列化为json,然后存到redis(string类型).然后再取出来反序列化为数组,就变成对象数组了 thinkPHP普通数组取值$arr['key'] 对象数组取值$arr-& ...
- swfupload 相关配置
部署在IIS上出现404: 修改 C:\Windows\System32\inetsrv\config\applicationHost.config 文件 连续查找requestFiltering,往 ...