form设置enctype属性为'application/json'不起作用

websky
  • 4
新手上路,请多包涵

由于项目中需要向后台传复杂的json数据处理完然后跳转,大家的做法是用ajax提交数据然后在用location.href跳转,但是这样做需要写两个controller,正好今天百度看了可以设置form的enctype属性为'application/json'就可以发送json数据,下面是网上的事例:


<form enctype='application/json'>
  <input name='pet[0][species]' value='Dahut'>
  <input name='pet[0][name]' value='Hypatia'>
  <input name='pet[1][species]' value='Felis Stultus'>
  <input name='pet[1][name]' value='Billie'>
</form>

// 生成的Json数据是
{
    "pet":  [
        {
            "species":  "Dahut"
        ,   "name":     "Hypatia"
        }
    ,   {
            "species":  "Felis Stultus"
        ,   "name":     "Billie"
        }
    ]
}

下面是我自己的代码实现将json转换为隐藏表单form表单提交:

 function postForm(url, params) {
        //使用递归遍历
        function iter(inputName, obj, resMap) {
            for (key in obj) {
                if (obj[key] && typeof obj[key] === 'object') {
                    if (inputName) {
                        iter(inputName + "[" + key + "]", obj[key], resMap);
                    } else {
                        iter(key, obj[key], resMap);
                    }
                } else {
                    resMap[inputName + "[" + key + "]"] = obj[key];
                }
            }
        }
        var temp = document.createElement("form");
        temp.action = url;
        temp.method = "post";
        temp.style.display = "none";
        temp.enctype = "application/json";
        var resList = {};
        iter('',params,resList);//遍历数据结构
        for (key in resList) {
            var hideInput = document.createElement("input");
            hideInput.type = "hidden";
            hideInput.name = key;
            hideInput.value = resList[key];
            temp.appendChild(hideInput);
        }
        document.body.appendChild(temp);
        temp.submit();
    }
    
测试数据
   var dd = {
user:{
    name:'小明',
    id:34
},
project:[{
    yuwen:{name:'语文',scre:444}},{shuxue:{name:'数学',scre:33}}
]
};
postForm('test',dd)
//生成的表单
<form action="testForm" method="post" enctype="application/json" style="display: none;">
<input type="hidden" name="user[name]" value="小明">
<input type="hidden" name="user[id]" value="34">
<input type="hidden" name="kemu[0][yuwen][name]" value="语文">
<input type="hidden" name="kemu[0][yuwen][scre]" value="444">
<input type="hidden" name="kemu[1][shuxue][name]" value="数学">
<input type="hidden" name="kemu[1][shuxue][scre]" value="33">
</form>

生成的数据跟网上的一样,可以提交的时候浏览器显示
Content-Type:application/x-www-form-urlencoded,并且后台也没有取到理想的json数据

clipboard.png

这是后台数据

有哪位大神知道怎么解决吗?求教

回复
阅读 7.2k
1 个回答

新的版本w3c废弃了enctype="application/json"特性。
即便在html5里面可以使用,遇到不支持的浏览器,会强制的设置为“Content-Type:application/x-www-form-urlencoded”。
你可以下载一个很老的浏览器,也许有效

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏