JavaScript AJAX:将HTML表发送到PHP

What is the correct way of sending a HTML table to the PHP script via AJAX, please? My table has 10 rows and three four columns. The table is not too large but still it could be too much for one AJAX call.

通过AJAX向PHP脚本发送HTML表的正确方式是什么?我的表有10行3列4列。这个表并不太大，但是对于一个AJAX调用来说，它还是太大了。

So here are my questions:

我的问题是:

Should the whole table content be sent via one AJAX request?
是否应该通过一个AJAX请求发送整个表内容?
Should I send the table content per table rows - 10 rows would be 10 AJAX calls?
我是否应该为每个表行发送表内容——10行是10个AJAX调用?
Should I encode the table values into JSON?
我应该将表值编码为JSON吗?

If you have any directions to correctly submitting tables to PHP script via AJAX, that would really help.

如果您有任何方向可以通过AJAX正确地向PHP脚本提交表，这将非常有帮助。

I use pure JavaScript and no JQuery.

我使用纯JavaScript，不使用JQuery。

Thank you in advance.

提前谢谢你。

UPDATE - SOLUTION:

For those, who are interested in fully working solution, here is the full sotuion that works well for me.

对于那些对完全工作的解决方案感兴趣的人，这里有一个对我很有效的完整方案。

JavaScript:

JavaScript:

    // submit the table to the PHP script for processing
BlacklistTable.prototype.submit = function()
{
    var that = this;

    // get table ID
    var elementTable = document.getElementById('copyrightBlacklistTable');

    // create JSON object
    var jObject = [];

    // iterate through the table
    // rows
    for (var i = 0; i < elementTable.rows.length; i++)
    {
        // create array within the array - 2nd dimension
        jObject[i] = [];

        // columns within the row
        for (var j = 0; j < elementTable.rows[i].cells.length; j++)
        {
            jObject[i][j] = elementTable.rows[i].cells[j].innerHTML;
        }
    }

    var JSONObject = encodeURIComponent( JSON.stringify(jObject));

    var url = "PHP/updateBlacklist.php";
    var requestData = "&blacklistObject=" + JSONObject;

    var XMLHttpRequestObj = FileResort.Utils.createRequest();
    XMLHttpRequestObj.open("POST", url, true);
    XMLHttpRequestObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    XMLHttpRequestObj.send(requestData);

    // process return message
    XMLHttpRequestObj.onreadystatechange = function (event)
    {
        if (XMLHttpRequestObj.readyState == 4 && XMLHttpRequestObj.status == 200)
        {
            alert(XMLHttpRequestObj.responseText);
            var responseJSON = eval('(' + XMLHttpRequestObj.responseText + ')');

            if (responseJSON.result == true)
            {
                console.log("Success processing Blacklist Object");
            }
            else
            {
                console.log("Error processing Blacklist Object");
            }
        }
    }

};

PHP Script:

PHP脚本:

// debugging library
include 'ChromePhp.php';

// connect to the database
require_once 'mysqlConnect.php';

// get variable values stored in $_POST
$blacklistObjectJSON = $_POST['blacklistObject'];

//$data = json_decode($blacklistObjectJSON, true);
$data = json_decode($blacklistObjectJSON, false);

// testing accessing the imported table values
echo $data[0][0];

// close database connection
mysqli_close($dbc);

$array = array("result" => true);
echo json_encode($array);

2 个解决方案

#1

i think best way use JSON. you can do something like this

我认为最好的方法是使用JSON。你可以这样做

function getJson(){
    var table = document.getElementById('mytable');
    var tr = table.getElementsByTagName('tr');
    var jObject = {}
    for (var i = 0; i < tr.length; i++){
        var td = tr[i].getElementsByTagName('td');

        for (var j = 0; j < td.length; j++){
            jObject['table_tr' + i + '_td_' + j] = td[j].innerHTML;
        }
    }
    return jObject;
}

demo

演示

#2

I recommend you to make a object with your table data, encode it into JSON, and then send to your server. Use $jsondata = json_decode( $some_variable, true ); to transform Json to a associative array.

我建议您使用表数据创建一个对象，将其编码为JSON，然后发送到您的服务器。使用$jsondata = json_decode($some_variable, true);将Json转换为关联数组。

Here is nice pure javascript snippet at http://www.quirksmode.org/js/xmlhttp.html

下面是http://www.quirksmode.org/js/xmlhttp.html的纯javascript代码片段

10 rows isn't a problem. But if you table grow up to 100 rows or even more you better split your data into multiple AJAX requests.

10行不是问题。但是，如果表可以扩展到100行甚至更多，那么最好将数据分割为多个AJAX请求。

#1