在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. Cannot invoke Tomcat manager: socket write error

    一开始, 参照 http://www.cnblogs.com/yezhenhan/archive/2012/07/17/2594684.html mvn tomcat:redeploy 出现: Can ...

  2. Linux——JDK配置

    一.安装jdk-7u21-linux-x64.rpm文件 [root@centos6 local]# rpm –ivh  jdk-7u21-linux-x64.rpm 二.防火墙开放8080端口 (在 ...

  3. mybatis_动态sql 查询、更新

    1)sql where 条件 select id="find" parameterType="User" resultType="User" ...

  4. leetcode1021

    class Solution(object): def removeOuterParentheses(self, S: str) -> str: li = list() bcode = 0 te ...

  5. 利用STM32CubeMX来生成USB_HID_Mouse工程

    硬件开发板:STM32F103C8 软件平台 好了现在开始利用STM32CubeMX来生成我们的工程 1.新建工程 选择MCU的型号 选择选择时钟 开启usb的模块 选择USB的类 配置时钟树(主要是 ...

  6. oracle 内连接（inner join）、外连接（outer join）、全连接（full join）

    转自:https://premier9527.iteye.com/blog/1659689 建表语句: create table EMPLOYEE(EID NUMBER,DEPTID NUMBER,E ...

  7. TFrame bug

    delphi 10.1.2 工程里有很多fram 正确的工程文件dproj中fram的定义是 <DCCReference Include="Unit15frame.pas"& ...

  8. 关于php MD5加密 与java MD5 加密结果不一致的问题

    针对PHP不是UTF-8编码导致的问题 public String md5(String txt) {              try{                   MessageDiges ...

  9. 工作记录 rfcn网络结构 caffe time测速和实际运行中速度不相等。

    现象: 用caffe time测试网络结构,前向传播是 8 ms左右, 实际集成后运行的时候,forward耗时大概4-5ms. 输入大小是一致的. 于是开始查这个问题. 最后定位到,差别在propo ...

  10. docker之数据卷管理

    转自:https://www.cnblogs.com/jsonhc/p/7777811.html docker之数据卷的备份和还原 1.现在利用镜像创建一个nginx的服务容器,并挂载一个数据卷 [r ...