user5405873 user5405873 - 26 days ago 11
Javascript Question

How can I return an array and HTML data in an AJAX response?

I have an array like this in my PHP page named new1.php:

$arr = ['value 1', 'value 2', 'value 3'];
$html = '<div>huge data with all tags like a page</div>';
$response = json_encode('array' => $arr, 'html' => $html);
echo $response


In the calling page, when I
console.log(data.html)
it gives
undefined
. The same happens for
console.log(data.array);
. Here is my AJAX code:

$.ajax({
url: "new1.php",
type: "POST",
data: { somedata: somedata },
dataType: "text",
success: function(data) {
console.log(data);
console.log(data.html);
console.log(data.array);
}
});


Most importantly, I want to know what is the best way to return a page with other data from AJAX response?

Answer

from your php code where you do json_encode add this to the top of the page header("Content-Type: application/json"); then your encode should take in array as parameter instead

json_encode(array("array"=>$arr, "html"=>$html));

it should see your record as json now and please change ur dataType to json from Jquery intelligence guess from the server state (jquery) it will automatically take json instead

dataType (default: Intelligent Guess (xml, json, script, or html)) Type: String The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). The available types (and the result passed as the first argument to your success callback) are: