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.

So here are my questions:

• Should the whole table content be sent via one AJAX request?


• Should I send the table content per table rows - 10 rows would be 10 AJAX calls?


• Should I encode the table values into JSON?

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

I use pure JavaScript and no 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:

    // 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:

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