由于项目中需要向后台传复杂的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数据
这是后台数据
有哪位大神知道怎么解决吗?求教
新的版本w3c废弃了enctype="application/json"特性。
即便在html5里面可以使用,遇到不支持的浏览器,会强制的设置为“Content-Type:application/x-www-form-urlencoded”。
你可以下载一个很老的浏览器,也许有效