Ajax: Send PHP variable to JS without echo?

Question

I'm fairly new to both PHP and Ajax, so this might seem trivial, although I couldn't seem to find a clear answer to this.

I'm sending a query to a process.php using ajax, and then display the result on the page. What I've got works fine and everything's ok:

$.ajax({
   type: "POST",
   url: "process.php",
   data: { 'data1': yada, 'data2': yadayada},
   beforeSend: function(html) {
      $("#some-div").html('<p>loading</p>');
   },
   success: function(html){
      $("#some-div").html(html);
   }
});

Now, this works because I'm basically echoing the result of the query at the end of process.php, which then gets displayed in #some-div. The thing is, I'd also like to retrieve some of the data that was processed in the PHP to use it in my JS. However, I don't want to echo this data at the end of the PHP, as I don't want to display it in #some-div.

In other words, say my process.php looks like this:

$var1 = "hello world";
$var2 = "It's sunny outside";
$var3 = ["key1"=>"one", "key2"=>"two", "key3"=>"three"];

$result = $var1 . $var3["key2"];
echo $result;

The $result gets displayed in #some-div, that's fine. But what if I'd like to make a wonderful alert(); in JS with the content of the $var3["key3"] without displaying it in #some-div?

Should I make another query to do so (which seems inconvenient and inefficient), or is there a way to pass data from process.php to the JS without echoing it?

Thanks!

Answer 1

php:

echo json_encode(array(
  'html' => 'this outputs into the div',
  'other_data' => 12345,
));

js:

$.ajax({
   type: "POST",
   url: "process.php",
   data: { 'data1': yada, 'data2': yadayada},
   beforeSend: function(html) {
      $("#some-div").html('<p>loading</p>');
   },
   success: function(data){
      $("#some-div").html(data.html);
      alert(data.other_data);
   }
});

Answer 2

Output the data as JSON so that you can have separate parts or variables:

$response = array('result' => $result, 'otherData' => $var3);
echo json_encode($response);

Javascript:

$.ajax({
   type: "POST",
   url: "process.php",
   data: { 'data1': yada, 'data2': yadayada},
   dataType : 'json', // <-- tell jQuery to parse the JSON
   beforeSend: function(html) {
      $("#some-div").html('<p>loading</p>');
   },
   success: function(response){
      alert( response.otherData.key3 );
      $("#some-div").html(response.result);
   }
});

Answer 3

you are getting an objet from the function on success. that objet contains the response from the php file, only 2 things to add. in the data: parametter its more convinient to use the serialize() method. and two: i strongly recomend you to return a json objet from the php file. in that case you will be reciving a javascript objetc, very easy to use.

sorry about my english. cheers!

Answer 4

因此，结论是，是的，您必须输出一些数据，或者导致您的服务器端脚本，因为当您打开与xmlhttp.open（）的连接时，您基本上将结果输出到执行脚本的浏览器。