工作中遇到了太多太多的表单提交问题，曾经学过一个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. 关于 .NET Core 动态链接库的开发

    上个月月底,VS2017RC版发布了,一个很大的特点就是将原来的xProj文件又改回了csproj了. 这样一改,其实很多新的问题也暴露出来了,最严重的问题就是Net版本兼容性. 原来的Net体系大致 ...

  2. 【微信开发】公众号后台设置错误导致的微信redirect_uri参数错误【图】

    在微信开发中,如微信网页授权登录,分享到朋友圈自定义内容,微信h5支付时 可能会遇到微信redirect_uri参数错误的情况. 此时除了检查自己代码正确性外,还要检查一下是否正确地设置了公众号后台的 ...

  3. 2016 ICPC青岛站---k题 Finding Hotels（K-D树）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5992 Problem Description There are N hotels all over ...

  4. Java01

    1.JAVA历史概述       百度百科:http://baike.baidu.com/view/29.htm      詹姆斯.高斯林  (高司令)----java之父    Sun Micros ...

  5. Java 内存区域与内存溢出

    内存区域 Java 虚拟机在执行 Java 程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java 虚拟机规范将 JVM 所管理的内存分为以下几个运行时数据区:程序计数器.Java 虚拟机 ...

  6. Node.js之sails框架

    先开一坑,有空更新,记录最近钉钉项目上对node及sails框架的学习记录和理解

  7. Android开发学习—— activity

    activity生命周期 #Activity生命周期###void onCreate()* Activity已经被创建完毕###void onStart()* Activity已经显示在屏幕,但没有得 ...

  8. C#使用ADO.NET访问数据库（一）

    博主好久没更新博客了,最近有点忙(打麻将0.0..),今天更新一篇C#的,我还是想坚持更新博客,分享一下自己的心得,闲话少说,开始正题~~ ADO.NET概述:ADO.NET的作用在于他是客户端访问服 ...

  9. IOS 杂笔－14（被人遗忘的owner）

    *owner在开发中现在已经很少用了 有兴趣的童鞋可以看看* 我们遇到owner通常是在类似 [[[NSBundle mainBundle] loadNibNamed:@"Food" ...

  10. git推送本地分支到远程分支

    场景 有时候我们开发需要开一个分支,这样可以有效的并行开发. 开分支有两种方式: 一种是在远程开好分支,本地直接拉下来; 一种是本地开好分支,推送到远程. 远程先开好分支然后拉到本地 git chec ...