form表单获取数据并将json中的value值转换为key值
我是新菜,在此分享一下心得,莫见怪哈。
首先,说一下如何获取form表单中的值:
前提:引入jQuery
<form method="post" enctype='multipart/form-data' id='noteForm'>
<div class="note-type">
<label for="noteTypeList">记事类型</label>
<select id="noteTypeList" name="noteCategory">
<option value="gujiajishu">估价技术</option>
<option value="jishuanli">技术案例</option>
<option value="shichangdongtai">市场动态</option>
</select>
</div>
<div class="note-inpts">
<div class="note-box">
<label for="noteTitle">标题</label>
<input id="noteTitle" type="text" name="noteTitle" />
</div>
<div class="note-box">
<label for="noteKeys">关键字</label>
<input id="noteKeys" type="text" name="noteKeys" />
</div>
</div>
<textarea id="summernote" name="noteContent" value=''></textarea>
<div class="note-btns"><button type="button" class="note-btn" id='button'>保存</button></div>
</form>
注:form表单的type类型要用button,或者button类型是submit,form表单加个onsubmit事件,阻止表单提交。
获取表单数据:
$('#button').click(function(){
$('#noteForm').serialize()
})
发现获取到的结果是:
noteCategory=gujiajishu¬eTitle=title¬eKeys=key¬eContent=content
获取到的form值是name=value并用&连接的,这不是我需要的json数据啊,还得解析,麻烦,再换一种方式:
$("button").click(function(){
var formData=$('#noteForm').serializeArray();
console.log(formData)
})
然后获取到的结果是:
有点json值的样子了,直接name对应输入框的name值,value对应输入框的value值,但是我们后台要的值不是这种,我需要的是name对应value值,这是我入的坑之一,怪不得后台一直报提交数据错误,让我捂脸哭会,还得后期加工一下啊:
$("button").click(function(){
var formData=$('#noteForm').serializeArray();
var jsonObj={};
for(var i in formData){
jsonObj[formData[i].name]=formData[i].value;
}
console.log(jsonObj);
})
然后得到如下结果,先让我激动会!!
小伙伴们有更好的建议或意见可以恢复我哦O(∩_∩)O~