pass php array to javascript using ajax

Question

I try to get array from sql server using php , and parsing these array to javascript using ajax. However , I have tried many solution by google , I can't get the array.

This is my php code:

<?php
 include 'Connect.php';
 $Store_int = $_GET['num'];
 $sql = "SELECT * FROM `store` WHERE `Place_int` = " . $Store_int;
 mysqli_select_db($link, "web");
 $link->set_charset("utf8");
 $result = mysqli_query($link, $sql);
 $arr = array();
 while ($row = mysqli_fetch_object($result)) {
 $p = (string)$row->Name;
 $arr[] = $p;
 }
 //print_r($arr);
 $jsonArr = json_encode($arr, JSON_UNESCAPED_UNICODE);
 echo $jsonArr;
 mysqli_free_result($result);
 mysqli_close($link);
?>

Array in php will encode and display:

["pen","pencil","apple","cat","dog"]

and the .js file

function getArr(store_int) {
 var jsArray = new Array();
 $.ajax({
 url: "fromSQL_store.php",
 data: {
 num: $("#store_int").val()
 },
 type: "GET",
 dataType: "json",
 success: function (data) {
 alert(num);
 jsArray = JSON.parse(data.jsonArr);
 }, error: function (data) {
 alert("123");
 }
 });
 //alert(jsArray.length);
 return jsArray;
}

In .js , I will always get empty response(undefined) from php. Because the ajax will answer "error" function..., and the error status is 200.

• tereško: Your code is vulnerable to SQL injections. Please learn to use prepared statements.
• tereško: As for your question, you need to also set JSON Content-Type header in PHP
• Zi-yan Tseng: @tereško thanks, I'll prevent the SQL injections after solve the problem.
• Junius L: @Zi-yanTseng you don't use this store_int parameter why is it there?
• Zi-yan Tseng: @2by2 hi , it will pass by outside . Ex: getArr("1")

Answer 1

Your array will always return undfined as the AJAX call is async, your function returns jsArray before it is set. and You don't need JSON.parse() as you have defined dataType as json in your ajax call. Pass a function to your getArr() function and use your data in that function.

function getArr(store_int, outputFn){ // what do you use store_int for?
 $.ajax({
 url: "fromSQL_store.php",
 data: {
 num: $("#store_int").val()
 },
 type: "GET",
 dataType: "json",
 success: function(data) {
 outputFn(data)
 },error: function(data){
 alert("123");
 }
 });
}

Then use it like

getArr('5', function (data) {
 console.log(data)
})

Console output

enter image description here

• Zi-yan Tseng: hello , I try it , and error again. And I change lots of the code in another way
• Zi-yan Tseng: unexpected token at position 0
• Zi-yan Tseng: yes , i have tried your code , and get the error response by errorThrown
• Zi-yan Tseng: hello , i find the problem , i include 'Connect.php' , and there is html code in the Connect.php. Hence , I can't parse the json , even though I've deleted the Html code. Thanks

Answer 2

Your problem lies here. You are attempting to access data.jsonArr which is always undefined. The JSON data sent is actually embodied by data variable.

success: function(data) {
 alert(num);
 jsArray = JSON.parse(data.jsonArr); // Replace by jsArray = data;
}

NOTE, You might also need to specify that the MIME media type that is being outputted is JSON. Putting this at the top of your PHP script should solve your problem.

<?php
header('Content-Type: application/json');

• Zi-yan Tseng: hello , i finish it , and the result is the same . And some of my database data will be Garbled.
• Zi-yan Tseng: Thanks , i solve the garbled by adding charset=utf-8
• Zi-yan Tseng: @EyuelDK hi , i change the code in .js , i find the answer from ajax will error...
• EyuelDK: I'm no sure what the problem is then... if the ajax itself is throwing an error, i.e. the error callback is being called I'm kinda lost then. You should read the error on your PHP side for more information.