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)
  • 相关阅读:
    memcache内存估算整理
    yii2-更改默认显示的通用主页
    微信小程序开发工具中快捷键
    微信个人公众号推广
    [微信小程序]编译.wxss出错,2 not found
    [转载]SSH框架搭建详细图文教程
    网址收集
    在IIS上新发布的网站,样式与js资源文件加载不到(资源文件和网页同一个域名下)
    css与html基础收集
    js与jq基础记录
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/8675716.html
Copyright © 2011-2022 走看看