工作中遇到了太多太多的表单提交问题，曾经学过一个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表单提交的更多相关文章

  1. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  2. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  4. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  5. form表单提交

    1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  8. SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...

  9. Form表单提交，Ajax请求，$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  10. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

随机推荐

  1. 使用BitArray判断素数

    首先显示1024范围内的所有素数,然后显示输入的数是否是素数.1024 是代码中计算的素数的范围,可以修改.计算平方根,是为了确定一个基数的范围.1024的平方根是32,两个超过32 的数相乘,肯定大 ...

  2. C#开发微信门户及应用(2)--微信消息的处理和应答

    微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微 ...

  3. Amazon Interview | Set 27

    Amazon Interview | Set 27 Hi, I was recently interviewed for SDE1 position for Amazon and got select ...

  4. SpringMVC的执行流程（二）

    文字解析: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配 DispatcherServlet的请求映射路径(在web.xml中指定),web容器将请求转交 ...

  5. dSYM 文件分析工具

    来到新公司后,前段时间就一直在忙,前不久 项目 终于成功发布上线了,最近就在给项目做优化,并排除一些线上软件的 bug,因为项目中使用了友盟统计,所以在友盟给出的错误信息统计中能比较方便的找出客户端异 ...

  6. iOS 自定义方法 - 播放GIF

    示例代码 ///////////////////////第一种/////////////////////// ////  GifView.h//  GIFViewer////  Created by ...

  7. SQL语句中的where 1=1 和0=1

    摘自:http://blog.sina.com.cn/s/blog_afe616ab0101camd.html SQL where 1=1 和0=1的作用 where 1=1; 这个条件始终为True ...

  8. 机器学习实战笔记(Python实现)-03-朴素贝叶斯

    --------------------------------------------------------------------------------------- 本系列文章为<机器 ...

  9. 《Ansible权威指南》笔记（1）——安装，ssh密钥登陆，命令

    2016-12-23 读这本<Ansible权威指南>学习ansible,根据本书内容和网上的各种文档,以及经过自己测试,写出以下笔记.另,这本书内容很好,但印刷错误比较多,作者说第二版会 ...

  10. svn web页面管理svnadmin部署

    1.yum install subversion  创建svn目录  mdkir -p /data/svndirroot  建立svn库 svnadmin create /data/svndirroo ...