如何发送DOM对象作为JSON对象

我想将表的整行发布到php页面（它是Ajax请求的一部分）。如果我使用JSON.stringify(rowObject)，则会出现错误。我认为这是因为对象是“周期性”的。我真的想要发送该行，因为它拥有所有正确的数据，而不是单独发布每个变量。有没有简单的解决方案，不需要jquery，或者至少不会混淆循环遍历对象并重建它？如何发送DOM对象作为JSON对象

来源

2013-02-24 VoltzRoad

什么是'rowObject'？ – 2013-02-24 00:59:10

你能发表一个文本形式（rowObject）行的HTML的例子吗？ – 2013-02-24 00:59:14

为什么选择JSON？只需将它序列化为XML。 – Bergi 2013-02-24 01:00:23

JSONML提供了一个很好的标记表示为JSON数据。它也offers code为您转换的DOM。

鉴于这种DOM：

<table> 
    <thead> 
     <tr><th>one</th><th>two</th><th>three</th></tr> 
    </thead> 
    <tbody id="myTbody"> 
     <tr><td><input value="one"/></td><td><span>two</span></td><td>three</td></tr> 
    </tbody> 
</table>

这个代码把它转换成原生的JavaScript对象，然后以JSON：

var result = JsonML.fromHTML(document.querySelector("table")); 
var strResult = JSON.stringify(result, null, 4);

，并产生这样的结果：

http://jsfiddle.net/bF3LK/

[ 
    "TABLE", 
    "\n ", 
    [ 
     "THEAD", 
     "\n  ", 
     [ 
      "TR", 
      [ 
       "TH", 
       "one" 
      ], 
      [ 
       "TH", 
       "two" 
      ], 
      [ 
       "TH", 
       "three" 
      ] 
     ], 
     "\n " 
    ], 
    "\n ", 
    [ 
     "TBODY", 
     { 
      "id": "myTbody" 
     }, 
     "\n  ", 
     [ 
      "TR", 
      [ 
       "TD", 
       [ 
        "INPUT", 
        { 
         "value": "one" 
        } 
       ] 
      ], 
      [ 
       "TD", 
       [ 
        "SPAN", 
        "two" 
       ] 
      ], 
      [ 
       "TD", 
       "three" 
      ] 
     ], 
     "\n " 
    ], 
    "\n" 
]

来源

2013-02-24 01:29:07

我建议迭代DOM对象中的元素并动态构建一个对象。那么你可以安全地使用JSON.stringify（）。最好有更多关于DOM对象和你想要的JSON输出的信息来确定完成这个的最佳方法。

缺少这些信息，这里有一些建议。

假设rowObject是DOM对象，使用的document.getElementById也许获得（）或一些其它DOM方法，可以访问返回字符串值几个有用的性质。

rowObject.textContent会给你一个纯文本版本的DOM对象，而忽略了HTML标签，但保留空白。

rowObject.innerText与此类似，但应排除任何不可见的内容。

rowObject.innerHTML将拉出内部HTML输出HTML标记及其内容。

我知道这与转换为真正的JSON并不相同。同样，最好动态构建一个对象，然后将其传递给JSON.stringify（）。

有关这些属性的详细信息，请参阅：Node.textContent on MDN

来源

2013-02-24 01:32:22

由于要读取该行有ID ROWID以下应该做你问什么

JSON.stringify(
    (function(o) { 
     var arr=[]; 
     for(var x=0;x<o.length;x+=1) arr.push(o[x].innerText); 
     return arr; 
    }) (document.getElementById("rowID").getElementsByTagName("td")));

来源

2013-02-24 02:11:52 Paolo

这非常符合我的想法。我可能不会以同样的方式编写它，但这是一个很好的代码示例。 :) – 2013-02-24 04:03:13

@系统示例的输出是什么？ ...如果有人像在他自己的后院，并可以轻松地发布.. :-) – sasha 2015-07-09 00:35:22

@sasha看到这个小提琴：https://jsfiddle.net/1fd97pro/注意我添加了“rowID”作为id我想从中获取文本的行。运行它时，您会注意到没有文本从第一列中提取（因为它包含输入字段而不是文本） - 如果表中包含输入字段并且必须从中提取数据，则需要更改代码一点点。但它很简单... – Paolo 2015-07-13 20:38:45

HTML：

<table id="table1"> 
<tr> 
    <td>row 0 cell 0</td> 
    <td>row 0 cell 1</td> 
    <td>row 0 cell 2</td> 
</tr> 
<tr> 
    <td>row 1 cell 0</td> 
    <td>row 1 cell 1</td> 
    <td>row 1 cell 2</td> 
</tr> 
</table>

JS：

var data = [].map.call(table1.rows, function(row){ 
    return [].map.call(row.cells, function(cell){ 
     return cell.textContent; 
    }); 
}); 
console.log(data);

你会得到这样的数据JSON：

[ 
    [ 
     "row 0 cell 0", 
     "row 0 cell 1", 
     "row 0 cell 2" 
    ], 
    [ 
     "row 1 cell 0", 
     "row 1 cell 1", 
     "row 1 cell 2" 
    ] 
]

来源

2015-12-12 10:40:54 cuixiping

如何发送DOM对象作为JSON对象

回答

相关问题