工作中遇到了太多太多的表单提交问题，曾经学过一个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. C#中HttpClient使用注意：预热与长连接

    最近在测试一个第三方API,准备集成在我们的网站应用中.API的调用使用的是.NET中的HttpClient,由于这个API会在关键业务中用到,对调用API的整体响应速度有严格要求,所以对HttpCl ...

  2. NSwagStudio for Swagger Api

    本案例主要说明如何使用NSwag 工具使用桌面工具快速生成c# 客户端代码.快速的访问Web Api. NSwagStudio 下载地址 比较强大.可以生成TypeScript.WebApi Cont ...

  3. Devexpress Ribbon Add Logo

    一直在网上找类似的效果.在Devpexress控件里面的这个是一个Demo的.没法查看源代码.也不知道怎么写的.所以就在网上搜索了半天的. 终于找到类似的解决办法. 可以使用重绘制的办法的来解决. [ ...

  4. Java Servlet+Objective-c图上传 步骤详细

    一. Servlet 1.创建图片保存的路径 在项目的WebContent下创建一个上传图片的专属文件夹. 这个文件夹创建后,我们保存的图片就在该文件夹的真实路径下,但是在项目中是无法看到上传的图片的 ...

  5. Redis 简单搭建

    ======== redis ======== 1. redis setup and test : 1. download the package from https://redis.io/down ...

  6. freemarker页面中文乱码

    一.前言 简单的记录freemarker遇到的错误问题:ftl页面中文乱码 由于freemarker整合在ssm框架中,所以笔者直接贴配置代码 <beans xmlns="http:/ ...

  7. java函数的笔记

    java中,函数即方法.也就是实现某个功能的办法. 函数的格式 修饰符 返回值类型 函数名(参数类型 参数) { 逻辑处理; return 处理结果; // return关键字是用于结束该函数的,并将 ...

  8. win10 下visual studio 2015 在调试模式下不能跟踪源文件

    win10 下visual studio 2015 在调试模式下不能跟踪源文件,只要一调试就会关闭(隐藏)打开的文档,非常不方便.经过一番折腾,发现是配置的问题. 如果安装多个版本的VS,请删除对应版 ...

  9. JavaScript学习笔记1之基础知识点

    一.什么是JavaScrip JavaScript是一种动态类型.弱类型.基于原型的客户端脚本语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页 ...

  10. DevExpress VCL v16.1.3发布

    ExpressPDFViewer # BC3840:包含action标题和action提示的 Action classes 和 resource strings 重命名: class名称末尾中包含'A ...