JavaScript AJAX: Sending HTML Table to PHP

Question

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

Is there any reason you don't want to use jQuery? And could you post some code of what you've tried so far and then we can help you. — dcodesmith
– dcodesmith, Commented Dec 25, 2013 at 12:33
dcodesmith, at this moment I have only the table. I came to the point, when I should send the table to the PHP scrip. I did search on the net, but I did not find a correct way of sending HTML table to PHP. I therefore do not have too much code to demonstrate at this moment. — Bunkai.Satori
– Bunkai.Satori, Commented Dec 25, 2013 at 12:36

nzn · Accepted Answer · 2013-12-25 12:43:30Z

3

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

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

answered Dec 25, 2013 at 12:43

nzn

8385 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bunkai.Satori Over a year ago

hi. Thanks for your comment. Based on your advice, I have actually implmented my that could be submitted to my php script using JSON.stringify() and encodeURIComponent(). However, the core of my solution is pretty much the same as yours. I am therefore giving you +1 and marking your answer as the Accepted Answer. For my soluion, please, see the updated description of my question.

Andrew Surzhynskyi · Accepted Answer · 2013-12-25 12:49:38Z

0

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.

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

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.

edited Dec 25, 2013 at 12:49

answered Dec 25, 2013 at 12:42

Andrew Surzhynskyi

2,7761 gold badge25 silver badges32 bronze badges

Collectives™ on Stack Overflow

JavaScript AJAX: Sending HTML Table to PHP

UPDATE - SOLUTION:

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE - SOLUTION:

2 Answers 2

1 Comment

Comments

Related