JavaScript AJAX：将HTML表发送到PHP

Question

通过AJAX将HTML表格发送到PHP脚本的正确方法是什么？我的表有10行和3列。该表不是太大，但对于一个AJAX调用来说仍然可能太多了。

所以这是我的问题：

• 是否应通过一个AJAX请求发送整个表格内容？
• 我应该每个表行发送表内容 - 10行是10个AJAX调用吗？
• 我应该将表值编码为JSON吗？

如果您有任何指示通过AJAX正确地将表提交到PHP脚本，那将非常有用。

我使用纯JavaScript而不使用JQuery。

提前谢谢。

---

更新 - 解决方案：

对于那些对完全正常工作的解决方案感兴趣的人来说，这是一个适合我的完整sotuion。

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脚本：

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

Answer 1

我认为使用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

Answer 2

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

以下是http://www.quirksmode.org/js/xmlhttp.html

的精简纯JavaScript代码段

10行不是问题。但是如果你的表增长到100行甚至更多，你最好将数据分成多个AJAX请求。