CODEWITHSUNDEEP
javascriptphpajaxhtml
Bunkai.Satori
Bunkai.Satori

Reputation: 4758

JavaScript AJAX: Sending HTML Table to 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.

So here are my questions:

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

Upvotes: 2

Views: 6501

Answers (2)

Andrew Surzhynskyi
Andrew Surzhynskyi

Reputation: 2776

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.

Upvotes: 0

nzn
nzn

Reputation: 838

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

Upvotes: 3

Related Questions