Jquery ajax No PHP response

Question

My script runs fine and it alerts me the data is saved. but for Debug reason I want to see the PHP ("Procees.php") response as well in html format. I can see it in firebug but I do not know how to out put it using jquery. My codes are as follows;

            var dataString ='doctype='+ doctype + '&paytype=' + paytype + '&docno=' + docno + '&bookno=' + bookno + '&prname=' + prname +'&pename='+pename+'&paydate='+paydate+'&inpdate='+indate 
        +'&e1='+e1 +'&e2='+e2 +'&e3='+e3 +'&e4='+e4 +'&e5='+e5 +'&e6='+e6 +'&e7='+e7 +'&e8='+e8 
        +'&accname1='+accname1 +'&accname2='+accname2 +'&accname3='+accname3 +'&accname4='+accname4 +'&accname5='+accname5 +'&accname6='+accname6 +'&accname7='+accname7 +'&accname8='+accname8 
        +'&dr1='+dr1 +'&dr2='+dr2 +'&dr3='+dr3 +'&dr4='+dr4 +'&dr5='+dr5 +'&dr6='+dr6 +'&dr7='+dr7 +'&dr8='+dr8
        +'&cr1='+cr1 +'&cr2='+cr2 +'&cr3='+cr3+'&cr4='+cr4 +'&cr5='+cr5 +'&cr6='+cr6 +'&cr7='+cr7 +'&cr8='+cr8 +'&ref='+ref;


        //alert (dataString);return false;
        $.ajax({
        type: "POST",
        url: "bin/process.php",
        data: dataString,
        cache:false,
        datatype: 'json',               
        success: function(data) {

        $('#display').html("<h2>Data submitted!</h2>")
        .append("<p>Wait........</p>")
        .hide()
        .fadeIn(1500, function() {
        $('#display').append("<img id='checkmark' src='images/check-black.jpg' />");
        $('#display').html("<h3>Being Processed...</h3>")
        .fadeIn(1500, function() {
        $('#display').append("Saved <img id='checkmark' src='images/check-black.jpg' />")
        $('#thisfrm').get(0).reset();
        $("#indate").val(indate)






        });

        });
        }
        });


        return false;   

My PHP echos

                echo 'This is processing file.\n';


            $doctype = $_REQUEST['doctype'];
            $paytype = $_REQUEST['paytype'];
            $docno = $_REQUEST['docno'];
            $bookno = $_REQUEST['bookno'];
            $prname = $_REQUEST['prname'];
            $pename = $_REQUEST['pename'];
            $paydate = $_REQUEST['paydate'];
            $inpdate = $_REQUEST['inpdate'];
            $ref = $_REQUEST['ref'];


            echo $doctype."<br>";
            echo $paytype."<br>";
            ....
            ... and so on

but it is not shown anywahere on the webpage.

Thanks in advance for any help.

Answer 1

You need to json_encode your response since your jQuery is expecting json!

echo json_encode(array("doctype"=>$doctype, "paytype"=>$paytype));

Answer 2

The data that is output by PHP during an AJAX request will be in the data variable of your success callback function. If you want to append the data onto your page, you'll need to do so in your success function.

$.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    cache:false,          
    success: function(data) {
        // the data variable contains all PHP output during this request
        $('#display').html(data);
    }
});

Also note, your script currently specified that it is a JSON request - that jQuery ought to treat the output as JSON data. However, you are outputting text/html data in your PHP snippet. Either a) append your html into one variable, then call print json_encode($mydata); , OR b) remove the datatype property from the request. jQuery will "auto-detect" the response type. The above example is assuming you do NOT change the PHP code, below is details on how to correctly use JSON instead (change to PHP required).

To do the JSON method, instead of using echo , use a variable:

$html = '';
$html .= 'Doctype: '.$doctype;
$html .= 'Something elese: '.$something_else;
// etc...
die(json_encode(array('html'=>$html)));

Then your jQuery ajax function looks like this:

$.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    cache:false,
    datatype: 'json',           
    success: function(data) {
        $('#display').html(data.html);
    }
});

Answer 3

Put this inside your success function.

$('#display').append(data);