序列化元素内的输入（不是表单）答案

【问题标题】：serialize inputs inside element (not form)序列化元素内的输入（不是表单）
【发布时间】：2017-11-13 19:05:28
【问题描述】：

我有一个类似的 HTML：

<table>
    <tr id="01">
        <td><input name="x"></td>
        <td><input name="y"></td>
    </tr>
    <tr id="02">
        <td><input name="x"></td>
        <td><input name="y"></td>
    </tr>
</table>

我正在尝试仅在特定行上创建输入的 JSON 字符串。会有一个好的解决方案吗？比如：

json = $('#01').serialize();

但我需要一个 json 而不是 serialize() 提供的 URLEncode 字符串。

【问题讨论】：

把它们包装成无用的形式
试试$("#01 input").serialize?!
@bassxzero 您不能在<tr> 中放入表单。
jQuery to serialize only elements within a div的可能重复

标签： javascript jquery json serialization

【解决方案1】：

serialize() 不会为您提供所需的 JSON。它只会给你一个 URLEncode 的字符串。示例：

//test all inputs on row #02
window.tester = function() { 
	console.log($('#02 input').serialize());
};

//test all inputs
window.tester2 = function() { 
	console.log($('input').serialize());
};

//test only "y" inputs
window.tester3 = function() { 
	console.log($("input[name='y']").serialize());
};

<table>
    <tr id="01">
        <td><input name="x" value="1"></td>
        <td><input name="y" value="2"></td>
    </tr>
    <tr id="02">
        <td><input name="x" value="3"></td>
        <td><input name="y" value="4"></td>
    </tr>
</table>
<div>
  <input type="button" onclick="tester()" value="Test Row 02" /><br />
  <input type="button" onclick="tester2()" value="Test All Inputs" /><br />
  <input type="button" onclick="tester3()" value="Test Only 'y' Inputs" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

生产：

x=3&y=4
x=1&y=2&x=3&y=4
y=2&y=4

如果您想要的是 JSON，那么您需要具体说明您所追求的格式。数组？哈希？在任何情况下，上面的选择器都是您想要开始的，然后在某些时候，您会想要通过以下方式运行该值：

JSON.stringify(myResults);

window.arrayIt = function () {
  var arrVal = $('#02 input').toArray();
  var arr = arrVal.map(function (i) {
    var x = {};
    x[i.name] = i.value;
    return x;
  });
  console.log(JSON.stringify(arr));
}

<table>
    <tr id="01">
        <td><input name="x" value="1"></td>
        <td><input name="y" value="2"></td>
    </tr>
    <tr id="02">
        <td><input name="x" value="3"></td>
        <td><input name="y" value="4"></td>
    </tr>
</table>
<button onclick="arrayIt()">Array It!</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

【讨论】：

现在我知道我真正的问题是不知道如何将特定 tr 标签的输入转换为数组。该功能基本解决了我的问题，非常感谢！

【解决方案2】：

.serialize() 可用于输入集合。

$("#submit").click(function() {
  var data = $("#01 input").serialize();
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="01">
    <td><input name="x"></td>
    <td><input name="y"></td>
  </tr>
  <tr id="02">
    <td><input name="x"></td>
    <td><input name="y"></td>
  </tr>
</table>
<button id="submit">Click</button>

顺便说一句，serialize() 的结果不是 JSON，而是application/x-www-form-urlencoded 格式。

【讨论】：

【解决方案3】：

您可以使用$("#01 input").serialize()。

$('#abc').click(function(){
    json = $("#01 input").serialize().replace(/%20/g, "+");
    console.log(json);
});

<table>
    <tr id="01">
        <td><input name="x"></td>
        <td><input name="y"></td>
    </tr>
    <tr id="02">
        <td><input name="x"></td>
        <td><input name="y"></td>
    </tr>
</table>
<button id = "abc">serialize 01</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

【讨论】：