zoukankan      html  css  js  c++  java
  • Ajax提交表单数据(包含文件)

    1. 表单数据->JSON->后台

    2. 表单序列化【方式一】

    jquery.serializejson.js
    <script src="/js/jquery.serializejson.js"></script>
    <script>
        $('#btnRegister').click(function(){
            console.log(JSON.stringify($('#form1').serializeJSON()))
            $.ajax({
                type: 'post',
                url: '/loginPro',
                contentType:'application/json;charset=utf-8',
                async: true,
                //设置验证方式,设置请求头
                data: $('#form1').serializeJSON(),
                success: function (result) {
                },
                error: function () {
                    console.log('error')
                }
            });
        })
    
    </script>

    3. 使用FormData类

    //表单提交
    var formData = new FormData($('#addUserForm')[0])
    console.log(formData)
    $.ajax({
        url:'/user/addPro.do',
        type:'post',
        data:formData,
        contentType: false, //必须
        processData: false, //必须
        success:function (result) {
            
        },error:function () {
           
        }
    });

      在上面的js代码中,我们使用Jquery的ajax方法来提交数据。

      注意:应该使用较新的Jquery,老版本的可能不支持,同时必须设置contentType : false和processData : false。否则,jquery会报“Uncaught TypeError: Illegal invocation”这样的错误。因为jquery会试图将不是字符串的内容进行转换,设置processData : false禁止其转换,设置contentType : false是告诉jquery不要为其设置Content-Type头,防止上传失败。

      注意:对于springmvc的后台,需要配置视图解析器,否则文件为null:

        <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize">
                <value>102400</value>
            </property>
            <property name="defaultEncoding">
                <value>utf-8</value>
            </property>
        </bean>

    4. string <-->Object

    var str = '{"name":"admin","age":20}';
    var obj = eval('('+str+')');  //方式一
    
    //方式二,注意 JSON字符串的引号必须使用  "
     var obj = JSON.parse(str)
  • 相关阅读:
    JSTL标签用法
    (转)javascript正则实战
    Spring中几种数据源的配置
    (转)常用正则表达式
    EL表达式详解
    JAVA环境变量配置(转)
    S2SH整合步骤
    正则表达式30分钟教程(转)
    在Flash Player 10.2中使用原生鼠标指针
    time
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/8675716.html
Copyright © 2011-2022 走看看