工作中遇到了太多太多的表单提交问题，曾经学过一个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. Redis主从复制

    大家可以先看这篇文章ASP.NET Redis 开发对Redis有个初步的了解 Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此 ...

  2. Hibernate入门详解

    学习Hibernate ,我们首先要知道为什么要学习它?它有什么好处?也就是我们为什么要学习框架技术? 还要知道    什么是Hibernate?    为什么要使用Hibernate?    Hib ...

  3. jQuery动画与特效详解

    本文主要是讲解和学习jQuery的自动显隐,渐入渐出等. 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏. 代码如下: &l ...

  4. Java之this关键字的用法

    Java 中的 this 关键字指当前的对象,可以直接用其调用当前对象的成员变量,也可以直接用其调用当前对象的成员方法,这是我们常见的场景,那么有没有其它的情况呢! this 还可以在无参的构造方法中 ...

  5. java中IO流异常处理

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  6. 读<<领域驱动设计-软件核心复杂性应对之道>>有感

    道可道,非常道. 名可名,非常名. 无名天地之始,有名万物之母. ---老子 关于标题 好久没写东西了,动笔的动机是看完了一本书,想写点总结性的东西,一是为了回顾一下梳理知识点,二是为了日后遗忘时能有 ...

  7. HDFS的架构

    主从结构 主节点,只有一个: namenode 从节点,有很多个: datanodes 在版本1中,主节点只有一个,在 版本2中主节点有两个. namenode 负责(管理): 接收用户操作请求 维护 ...

  8. Spring 4 异常处理

    异常与HTTP状态码的映射(@ResponseStatus) Spring默认会将自身抛出的异常自动映射到合适的状态码,如下是一些示例: 举个例子,当后端抛出如下异常(TypeMismatchExce ...

  9. mac 下JDK 与 tomcat 的安装与配置

    一.Mac下JDK的安装 1.先检测Mac是否已经安装过JDK,在终端中输入java 或者 javac 显示说明,表明已经安装过JDK,JDK版本查询终端键入java -version,终端会返回JD ...

  10. 常见的高可用MySQL解决方案

    MySQL数据库作为最基础的数据存储服务之一,在整个系统中有着非常重要的地位,因此要求其具备高可用性是无可厚非的.有很多解决方案能实现不同的SLA(服务水平协定),这些方案可以保证数据库服务器在硬件或 ...