php - How can I send a DOM object as a JSON object - Stack Overflow

admin管理员组

文章数量:1418922

I would like to POST an entire row of a table to a php page (it's part of an Ajax request). If I use JSON.stringify(rowObject) I get an error. I think this is because the object is "cyclical". I really would like to send the row though, because it has ALL the right data, as opposed to posting each variable individually. Is there a simple solutions that doesn't need jquery, or at least doesn't involve messily looping through the object and rebuilding it?

I would like to POST an entire row of a table to a php page (it's part of an Ajax request). If I use JSON.stringify(rowObject) I get an error. I think this is because the object is "cyclical". I really would like to send the row though, because it has ALL the right data, as opposed to posting each variable individually. Is there a simple solutions that doesn't need jquery, or at least doesn't involve messily looping through the object and rebuilding it?

• php
• javascript
• json
• dom
• stringify

Share Improve this question Follow asked Feb 24, 2013 at 0:57 VoltzRoadVoltzRoad 49522 gold badges66 silver badges1111 bronze badges 7

• Could you post an example of the HTML for the row in text form (rowObject)? – Will Klein Commented Feb 24, 2013 at 0:59
• 2 Why JSON? Just serialize it to XML. – Bergi Commented Feb 24, 2013 at 1:00
• I know this isn't a debate about XML vs JSON, but each has their purpose. XML is great at being parsed on-the-fly, but it's fatter than JSON. If it's a quick, simple message, JSON is the bomb. If it's a huge amount of data, XML is probably a better choice, but it's all contextual. – adomnom Commented Feb 24, 2013 at 1:06
• What error are you getting? – ThinkingStiff Commented Feb 24, 2013 at 1:12
• I suggest posting not only an example of the DOM object's HTML, but the desired JSON format you want to convert to, and whether the JSON format is flexible. – Will Klein Commented Feb 24, 2013 at 1:26

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 4

JSONML provides a nice markup representation as JSON data. It also offers code for converting the DOM for you.

Given this 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>

This code converts it to native JavaScript objects, and then to JSON:

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

And produces this result:

http://jsfiddle/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"
]

Given the row you want to fetch has id rowID the following should do what you asked

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")));

I suggest iterating on the elements in the DOM object and building an object dynamically. Then you could JSON.stringify() that safely. It would be good to have more info about the DOM object and your desired JSON output to determine the best way to acplish this.

Short of having that information, here are some suggestions.

Assuming rowObject is a DOM object, perhaps obtained using document.getElementById() or some other DOM method, you have access to a couple useful properties that return string values.

rowObject.textContent will give you a text-only version of your DOM object, leaving out the HTML tags but preserving whitespace.

rowObject.innerText is similar, but should exclude anything that is not visible.

rowObject.innerHTML will pull out the inner HTML and output the HTML tags and their contents.

I know this isn't the same as converting to true JSON. Again, it would be preferable to build an object dynamically that could then be passed to JSON.stringify().

For more information on these properties, see: Node.textContent on MDN

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);

You will get the data json like this:

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

本文标签： phpHow can I send a DOM object as a JSON objectStack Overflow