Question

我知道有类似的问题，但我找不到我的问题的答案。

我有一个简单的表格和一个按钮。

<form id="myForm" class="vertically-centered">
    <p> Name </p>
    <input type="text"  name="name" id="formName"> 

    <p> Address</p> 
    <input type="text" name="address" id="formAddress">
    <input type="button" value="Submit" id="submitFormBtn">
</form>

按下按钮时，我想将插入的数据转换为JSON，以便稍后发送一个AJAX请求。

我想得到这样的东西

[{"name": name, "address":address}]

为实现这一目标，我正在使用serializeArray()

document.getElementById ("submitFormBtn").addEventListener ("click", submitFormData, false);
function submitFormData(){
    var formData = JSON.stringify($("#myForm").serializeArray());
    console.log(formData);
}

但是当我打印formData时，我得到空值和这种格式

[{"name":"name","value":""},{"name":"address","value":""}]

知道可能出现什么问题吗？

提前谢谢！

Answer 1

您需要使用每对键/值构建一个新对象：

＆＃13;

$("#myForm").submit(function(e){
    e.preventDefault();
    var res = {};
    $.each($('#myForm').serializeArray(), function() {
        res[this.name] = this.value;
    });
    alert( JSON.stringify(res) );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="myForm" class="vertically-centered">
    <p>Name</p> <input type="text" name="name" id="formName" />
    <p>Address</p> <input type="text" name="address" id="formAddress" /> <br/>
    <input type="submit" value="Submit" />
</form>

＆＃13;

注意：我的代码返回：{name: "name", address: "address"}

但你说你想要一个数组：[{name: "name", address: "address"}]

如果是这样，请用方括号包裹res：alert( JSON.stringify( [res] ) );

Answer 2

干净 JavaScript解决方案：

设置表单的长度：

var form = document.querySelector("#myForm"); // document.getElementById("myForm") is also working
var formLength = form.length;

form [0] first tag
表格[1]第二个标签
...
表格[0] .name <input name="name"...>
表格[0] .value <input value="inputValue"...>
...

设置对象以存储这些日期：

var obj = {};

单击按钮后，浏览表单并将日期存储在对象中：

for(var i = 0; i < formLength; i += 1) {
    obj[form[i].name] = form[i].value;
}

最后 stringify 您的对象：

var json = JSON.stringify(obj);

http://jsfiddle.net/Lcae8p8f/1/

JavaScript - HTML表单到JSON（空值）和格式

2 个答案: