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

时间:2013-02-24 00:57:41

标签: php javascript json dom stringify

我想将一个表的整行发布到一个php页面(它是Ajax请求的一部分)。 如果我使用JSON.stringify(rowObject),我会收到错误消息。我认为这是因为该对象是“周期性的”。我真的想发送行,因为它具有所有正确的数据,而不是单独发布每个变量。是否有一个简单的解决方案,不需要jquery,或者至少不涉及乱七八糟地遍历对象并重建它?

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:2)

如果您要获取的行具有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")));

答案 2 :(得分:1)

我建议迭代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

答案 3 :(得分:0)

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