如何从ajax调用返回数据到php

Question

i'm making an app which calls an JS function in php like

$data = "<script>JSFunction();</script>";

and JSFunction looks like this

function JSFunction(){
$.ajax({
    type: 'POST',
    url:'url/to/file',
    data:{'text':"some text here"},
    success:function(response){
        res = JSON.parse(response);
        document.write(res.data);

    },
    error: function(err){
        console.log(err);
    }
});
}

and $data variable in php gets the expected results. But when I echo $data; then data is printed on screen but browser page continues to reload. (It don't reload actually, but that circle in browser tab continuously appears rotating). So how would I stop that reloading? or is there any other way to return data from ajax call except document.write() ?

Answer 1

If you want to get JSON result from PHP script you may call ajax withe proper dataType :

$.ajax({
        type: "POST",
        url: "url/to/script",
        dataType: 'json',
        success: function (data) {
            $.ajax({
                    type: "POST",
                    url: "url/to/php/script",
                    dataType: 'json',
                    data: {data: data},
                    success: function (data) {
                        // do something...
                    }
            })
        }
    })

Don't forget to encode $data in the PHP script using json_encode leading with the proper header:

header("Content-Type: application/json");
echo json_encode($data);

Answer 2

document.write is considered bad practice since it can overwrite your page.

Here is what you need to do:

1. Create an empty DIV with an id.

2. Use innerHTML to write the response to the DIV considering that your output is from trusted sources since innerHTML can output HTML and not only text .

Your PHP:

<div id ="x"></div>

<?php $data = "<script type='text/javascript'>JSFunction();</script>";
echo $data;
?>

Your JS:

function JSFunction(){
   reValue = document.getElementById("x");

   $.ajax({
   type: 'POST',
    url:'url/to/file',
    dataType:'json',
    data:{'text':"some text here"},
    success:function(response){
    x.innerHTML = response.data;

   },
    error: function(err){
    console.log(err);
   }
});
}