工作中遇到了太多太多的表单提交问题，曾经学过一个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. 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。

    本文版权桂博客园和作者吴双共同所有,转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/p/6016055.html 写在前面 大家好我是博客园的蜗牛,博客园的蜗牛就是我 ...

  2. GridView中显示时间日期格式问题

    以下都是GridView基本常用的日期,时间格式 形式 语法 结果 注释 数字 {0:N2} 12.36   数字 {0:N0} 13   货币 {0:c2} $12.36   货币 {0:c4} $ ...

  3. 基础总结之Activity

    一.万事开头的序 网上看见大牛们的博客写的那样精彩,各种羡慕之情溢于言表.几次冲动均想效仿牛人写些博客来记录下自己的心得体会,但均无感亦或是感觉容易被喷,相信很多菜鸟和我一样都有过这样的担忧.万事开头 ...

  4. Linux下安装Hadoop完全分布式（Ubuntu12.10）

    Hadoop的安装非常简单,可以在官网上下载到最近的几个版本,最好使用稳定版.本例在3台机器集群安装.hadoop版本如下: 工具/原料 hadoop-0.20.2.tar.gz Ubuntu12.1 ...

  5. perl 如何匹配ASCII码以及ASCII码转换

    匹配ASCII码:   /[:ascii:]/ ASCII码转换为数字: ord() 数字转换为ASCII码: chr()

  6. Atitit.日志系统slf4j的使用

    Atitit.日志系统slf4j的使用 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar ...

  7. 特大喜讯，View and Data API 现在支持中文界面了

    大家经常会问到,使用View and Data API怎么做界面的本地化,来显示中文,现在好消息来了,从v1.2.19起,View and Data API开始支持多国语言界面了.你需要制定版本号为v ...

  8. 利用私有的API获得手机上所安装的所有应用信息（包括版本，名称，bundleID，类型）

    MobileCoreService这个系统的库,里面有个私有的类LSApplicationWorkspace ,利用运行时可以获得私有类里面的方法,- (id)allInstalledApplicat ...

  9. Unable to simultaneously satisfy constraints.

    在进行版本的迭代更新时,新功能需求需要对主页面的UI进行重新的布局,但是,报了错误,出了好多约束方面的问题: Unable to simultaneously satisfy constraints. ...

  10. ios动态创建类Class

    [Objective-C Runtime动态加载]---动态创建类Class 动态创建类Class,动态添加Class成员变量与成员函数,动态变量赋值与取值,动态函数调用等方法 a.使用objc_al ...