Get multipe response using AJAX and PHP

Question

Is it possible to get multiple responses using AJAX and PHP?

The event triggered by a select box and when it changes value (onchange) it calls the JavaScript function and get xmlhttp.responseText.

But on responseText we can only change one value/innerHtml based on id. I want to change 2 or more HTML using AJAX. Is it possible?

Here is my AJAX function:

if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {
    // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
        document.getElementById("txtStockQTY"+baris).value = "Validating..";
    }
    else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtStockQTY"+baris).value = xmlhttp.responseText;
    }
}

xmlhttp.open("GET", "ajaxGetStock.php?id="+id, true);
xmlhttp.send();`

And ajaxGetStock follows:

$idbarang = $_GET['id'];
include "../connect.php";

$resultSetStockType = mysql_query("SELECT STOCK_QTY,STOCK_QTYUNIT,STOCK_SIZE,STOCK_SIZE2 FROM TSTOCK WHERE STOCK_ID = $idbarang",$con);

if($resultSetStockType and mysql_num_rows($resultSetStockType) > 0) {
    while($rowSetStockType = mysql_fetch_array($resultSetStockType)) {
        echo $rowSetStockType['STOCK_QTY']." ".$rowSetStockType['STOCK_QTYUNIT'];
    }
}
else {
    echo "--- stok tidak ditemukan ---";
}

I want to get several return values from my AJAX and assign it to several inputs of type text.

DON'T USE `mysql_*` METHODS AS THEY ARE DEPRECATED AND HAVE BEEN REMOVED AS OF PHP 7. — Ikari, Mar 31 '16 at 10:10
I advice you to use formated texts like "JSON" : http://www.w3schools.com/js/js_json.asp — DiD, Mar 31 '16 at 10:11
**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 31 '16 at 10:29
thanks for the comment, guys. Perharps I'm gonna try mysqli_* — user3859812, Apr 02 '16 at 00:43

score 1 · Accepted Answer · answered Mar 31 '16 at 10:30

Return JSON like this in php:

return json_encode([
    'firstValue ' => 'my first value',
    'secondValue' => 'my second value'
]);

Then in JS:

var data = JSON.parse(xmlhttp.responseText);
document.getElementById("txtStockQTY"+baris).value = data.firstValue;

Note: I hate jQuery except for one thing: ajax calls. I advise you to use it in order to avoid all these lines of code that makes the code hard to read :)

score 0 · Answer 2 · answered Mar 31 '16 at 10:14

Instead of echoing the results straight from the database, you need to store them in an array and echo the JSON encoded array.

$array = array();
while($rowSetStockType = mysql_fetch_array($resultSetStockType)){
  $tempval =  $rowSetStockType['STOCK_QTY']." ".$rowSetStockType['STOCK_QTYUNIT'];

  $array.push($tempval);
}

//When its done processing all the returned values, echo json_encoded array.

echo json_encode($array);

you will then have access to the array from javascript.

score 0 · Answer 3 · edited Mar 31 '16 at 10:24

There are several ways to solve this problem, i'll try to explain some of them.

Return HTML elements

Return HTML code with inputs from your AJAX code and add them to a div with the use of innerHTML instead of .value like you are doing now.

Return JSON

Return the code as a JSON object with json_encode and use JavaScript JSON functions to populate your inputs. Alan Tan already provided you with an example while I'm typing this.

Get multipe response using AJAX and PHP

3 Answers3