鍍金池/ 問答/Java  HTML/ form設(shè)置enctype屬性為'application/json'不起作用

form設(shè)置enctype屬性為'application/json'不起作用

由于項目中需要向后臺傳復(fù)雜的json數(shù)據(jù)處理完然后跳轉(zhuǎn),大家的做法是用ajax提交數(shù)據(jù)然后在用location.href跳轉(zhuǎn),但是這樣做需要寫兩個controller,正好今天百度看了可以設(shè)置form的enctype屬性為'application/json'就可以發(fā)送json數(shù)據(jù),下面是網(wǎng)上的事例:


<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數(shù)據(jù)是
{
    "pet":  [
        {
            "species":  "Dahut"
        ,   "name":     "Hypatia"
        }
    ,   {
            "species":  "Felis Stultus"
        ,   "name":     "Billie"
        }
    ]
}

下面是我自己的代碼實現(xiàn)將json轉(zhuǎn)換為隱藏表單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);//遍歷數(shù)據(jù)結(jié)構(gòu)
        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();
    }
    
測試數(shù)據(jù)
   var dd = {
user:{
    name:'小明',
    id:34
},
project:[{
    yuwen:{name:'語文',scre:444}},{shuxue:{name:'數(shù)學(xué)',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="數(shù)學(xué)">
<input type="hidden" name="kemu[1][shuxue][scre]" value="33">
</form>

生成的數(shù)據(jù)跟網(wǎng)上的一樣,可以提交的時候瀏覽器顯示
Content-Type:application/x-www-form-urlencoded,并且后臺也沒有取到理想的json數(shù)據(jù)

clipboard.png

這是后臺數(shù)據(jù)

有哪位大神知道怎么解決嗎?求教

回答
編輯回答
神經(jīng)質(zhì)

新的版本w3c廢棄了enctype="application/json"特性。
即便在html5里面可以使用,遇到不支持的瀏覽器,會強制的設(shè)置為“Content-Type:application/x-www-form-urlencoded”。
你可以下載一個很老的瀏覽器,也許有效

2018年5月5日 03:34