在jquery中，使用ajax提交表单数据。

FormData可以很方便地获取到表单中的所有数据。

注意： ajax中的data参数为FormData类型时，contentType就不要设置成application/json了。

如果contentType设置成application/json，需要将FormData转换为json

示例如下：

<script type="text/javascript" >

    $(document).ready( function () {

        $("#commit").click(function () {

            var form =new FormData($( "#form-user")[0] );     //通过id获取表单的数据

            console.log("ajax");

            $.ajax({

                type:"POST",                             //请求的类型

                url:"/user/test",                  //请求的路径

                data: form  ,                    //请求的参数

                async: false,

                cache: false,

                contentType: false,

                processData: false,

                success: function (msg) {                 //成功返回触发的方法

                    console.log("ajax请求成功")

                },

                //请求失败触发的方法

                error:function(XMLHttpRequest, textStatus, errorThrown){

                    console.log("ajax请求失败");

                    console.log("请求对象XMLHttpRequest: "+XMLHttpRequest);

                    console.log("错误类型textStatus: "+textStatus);

                    console.log("异常对象errorThrown: "+errorThrown);

                }

            })

        })

        }

    );

</script>

<body>

    <form  id="form-user">

        账号：

       <input type="text" name="userName">  <br>

        年龄:

       <input type="text" name="age">     <br>

        vip :

         是:  <input type="checkbox" name="isVip" value="true">

         否:  <input type="checkbox" name="isVip" value="false">           <br>

         生日：

       <input type="date" name="birthday">            <br>

       <button id="commit" >提交</button>

    </form>

</body>

后台接收数据，如下：

  /**

     * 点击表单，获取formData后通过ajax跳转而来。

     * @param user

     * @return

     */

    @RequestMapping(value = "/user/test",method = RequestMethod.POST )

    public String getUserInfo( User user ,@RequestParam ("userName") String userName){

          System.out.println(user.getUserName() +","+user.getAge()+","+user.getBirthday());
          System.out.println("userName"+userName);

         return "test";

    }

参考资料 ：

https://blog.csdn.net/csdn2193714269/article/details/76269656

https://www.cnblogs.com/zhuxiaojie/p/4783939.html

jquery使用FormData提交数据的更多相关文章

  1. post请求中的参数形式和form-data提交数据时取不到的问题

    @Controller页面form表单请求时不会丢数据返回json数据时需要加 注解@ResponseBody请求格式如下 @ResponseBody public Object login(Sign ...

  2. JQuery按回车提交数据

    引入JQuery文件 <script src="JS/jquery-1.9.1.js" type="text/javascript"></sc ...

  3. element ui axios使用formdata提交数据

    axios({ //formdata提交 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequ ...

  4. iOS网络请求之multipart/form-data提交数据

    multipart/form-data表单数据 在http网络请求中,post没有请求长度的限制,因为post把数据放在了body中,而不是像Get一样放在了浏览器的地址栏中(可以这么理解), 所以相 ...

  5. axios formData提交数据 && axios设置charset无效？？？

    但是这样会出现一个问题,什么问题呢? 我设置了请求头编码utf-8,但是没生效 content-type里面没有出现utf-8???????查了很多资料,说这是axios固有的bug,我....... ...

  6. POST提交数据之---Content-Type的理解；

    POST提交数据之---Content-Type的理解: Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编 ...

  7. POST提交数据之---Content-Type的理解

    Content-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据. 在网络请求 ...

  8. vue+axios通过formdata提交参数和上传文件

    demo.vue 文件 <template> <div class="demo"> <input v-model="importForm.m ...

  9. JQuery中使用FormData异步提交数据和提交文件

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一 ...

随机推荐

  1. 2.3在LeetCode中使用我们自定义的类

    在上一节中我们使用的是java提供了的类,这一小节中我们就来学习一下如何在LeetCode中使用我们自定义的类. 其实很简单,我们只需把我们编写的自定义类,拷贝到LeetCode提供的类中,形成类中类 ...

  2. FLEX中一组基于button的组件

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  3. 转载：HTuple数据和VC数据的相互赋值

    转载来自:http://blog.csdn.net/taily_duan/article/details/51026260 HTuple和VC数据的相互赋值 // HTuple→VC 数据类型转换 H ...

  4. Mysql 隐式转换

    表定义: CREATE TABLE `ids` ( id ) not null auto_increment, PRIMARY KEY (id) ); 表中存在一些IDs: 111, 112, 113 ...

  5. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    转自:https://www.zhihu.com/question/20948649?sort=created 我最近也遇到这个问题了,用传统的快捷方式加参数并没有用,不知道是不是和chrome版本有 ...

  6. WPF 自定义鼠标光标

    在程序中使用自定义鼠标光标的三种方式: RadioButton senderButton = sender as RadioButton; 方式一:                       str ...

  7. +load +initialize

    +load方法 在app启动的时候各个类的+load方法都会被调用,+load方法不是通过消息机制调用的,它是直接调用的,因此无论是在子类或者category中复写此方法,复写的+load方法都会被调 ...

  8. spark 集成elasticsearch

    pyspark读写elasticsearch依赖elasticsearch-hadoop包,需要首先在这里下载,版本号可以通过自行修改url解决. """ write d ...

  9. js 迭代器 解说

    这里要说的是迭代器,是一种思路而已,代码相对来不是最关键的,个人认为,最关键的部分是实现的思路 要求: 在一个网页中,将所有的 p 元素的内容进行替换,但是在特定的位置的 p 元素是要有差异的进行替换 ...

  10. win10 任务栏锁定，win键没反应

    现象:之前用win10,换成win10专业版后,安装360优化系统,过了几天后突然发现任务栏好像被锁定一般,按windows键没有任何反应,任务栏打开的文件,图片等等右键也没有反应,讲道理应该有关闭选 ...