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

JavaScript - HTML form to JSON (empty values) and format

本文关键字：格式 空值 表单 JSON JavaScript-HTML      更新时间：2023-09-26

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

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

<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":""}]

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

提前谢谢！

A干净JavaScript解决方案：

设置表单的长度：

var form = document.querySelector("#myForm"); // document.getElementById("myForm") is also working
var formLength = form.length;
  • 形成[0]第一个标记
  • 表单[1]第二个标签

  • 。。。

  • 表单[0]。名称<input name="name"...>

  • 形式[0].值<input value="inputValue"...>

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

var obj = {};

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

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

最后字符串您的对象：

var json = JSON.stringify(obj);

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

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

$("#myForm").submit(function(e){
    e.preventDefault();
    var res = {};
    $.each($('#myForm').serializeArray(), function() {
        res[this.name] = this.value;
    });
    alert( JSON.stringify(res) );
});
<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>

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

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

如果是，请用方括号将res括起来：alert( JSON.stringify( [res] ) );

相关文章：