关于我们经常用到的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 ...
随机推荐
- [Tool] Open Live Writer插件开发
一 前言 Windows Live Writer(简称 WLW)开源之后变成 Open Live Writer(简称 OLW),原先 WLW 的插件在 OLW 下都不能用了,原因很简单,WLW 插件开 ...
- C# Linq排序
今天在家看了一下linq,实践了一下书中代码,发现排序和查重的先后顺序太重要了. using System; using System.Collections.Generic; using Syste ...
- Android 内存泄漏的一些情况。
最近在维护代码,发现一个自定义View(这个View是在一个AsyncTask的工作线程doInBackground中新建的,在UI线程onPostExecute中添加进window中的)经常会泄漏内 ...
- H5 表格标签的其它标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- css权威指南--笔记
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...
- [AlwaysOn Availability Groups]AlwaysOn Ring Buffers
AlwaysOn Ring Buffers 一些AlwaysOn的诊断信息可以从SQL Server ring buffers.或者从sys.dm_os_ring_buffers.ring buffe ...
- Hive安装(二)之表不见了
重启一下电脑,发现表不见了,原来我用的derby存储hive的meta,网上找了一下资料,说是要用mysql, 于是安装mysql sudo apt-get install mysql-serve ...
- sipex3232上电发送输入端拉低问题
之前没怎么注意,在使用下载盒通过isp下载stm32时,由于是通过stm32板子给下载盒供电,所以是我的stm32板子和下载盒同时上电.这样总是不能够进入下载模式,后来对下载盒进行仿真,发现在下载发送 ...
- (转)Java中的static关键字解析
转载: http://www.cnblogs.com/dolphin0520/p/3799052.html 一.static关键字的用途 在<Java编程思想>P86页有这样一段话: &q ...
- Ubuntu 14.04 LTS 下升级 gcc 到 gcc-4.9、gcc-5 版本
如果没记错的话,阿里云ECS上的Ubuntu也是LTS版本. 如果还在使用较旧版本的Ubuntu,或者是Ubuntu LTS,那么我们是很难体验新版gcc的.怎么办呢? 我们或许可以自己去编译用旧版本 ...