jQuery AJAX Call to PHP Script with String Return

StackOverflow https://stackoverflow.com/questions/20610372

Question

My aim here is to replicate the Hot Towel SPA framework from ASP.NET in PHP.

I have two files in my project: show.js and displaystring.php. What I basically want to do is return whatever is present in the displayString() function. But due to a series of unsuccessful attempts, I inserted the debugger statement in the shows.js file (as marked in the source code below) to find out what's wrong. When I run the project in Google Chrome and open the developer tools (Ctrl + Shift + i), I see that the program flow stops at the debugger statement (as expected) and when I hover my mouse over the data variable in the success property, I see that the displaystring.php file returns me the entire html source code instead of just returning the ".$_POST('string'); statement.

I have gone through many solutions on the internet but to no avail. Can anyone please tell me where exactly am I going wrong? Thank you.

show.js

define(function (require) {

    var val = "";
    //var moviesRepository = require("repositories/moviesRepository");

    $.ajax({
      url: "controllers/displaystring.php",
      type: "post",
      data: {input:"show"},
      datatype: 'json',
      success: function(data){
            val = data;      
        debugger; // Debugger inserted here.
      }});

    return {
        result: ko.observable(),

        activate: function() {
            this.result(val);
        }
    };
});

displaystring.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>String Display</title>
</head>

<body>
<?php
    function displayString() {
        return "The string passed is: ".$_POST('string');   
    }

    displayString();
?>
</body>
</html>
Was it helpful?

Solution 3

Okay after banging my head against a stone wall for the whole day, I figured out the solution myself.

I just modified the code a bit to serve the purpose of finding the answer to my question.

show.js

define(function (require) { 
    return {
        result: ko.observable(),

        activate: function() {
            //var moviesRepository = require("repositories/moviesRepository");
            var self = this;
            $.ajax({
                url: "controllers/displaystring.php",
                type: "get",
                data: {input:"show"},
                dataType: "html",
                success: function(data){
                    self.result(data);
                    debugger;
                }});
        }
    };
});

displaystring.php

<?php
    function display() {
        echo 'Hi I am some random '.rand().' output from the server.';
    }
    display();
    //echo "Hello World!";
?>

And that's it! You don't have to type the entire HTML code for the PHP file. Just include the PHP script and you will get the output.

Thank you all very much for your help. :)

OTHER TIPS

Try this way 

displaystring.php :

<?php
    function displayString() {
        return "The string passed is: ".$_POST['input'];   
    }
    echo displayString();
?>

First of all you must specify headers:

header('Content-type: text/json');
header('Content-type: application/json');

Second you must to formmat your content for this kind of headers:

<?php
    function displayString() {
        return json_encode($_POST);   
    }

    echo displayString();
?>

And also you must to read official documentation:

  1. Headers in php
  2. JSON format

You php file must be something like that:

<?php
     header('Content-type: text/json');
     function displayString() {
                return json_encode($_POST);   
            }

            echo displayString();

Have only PHP script like @tyagi mentioned & change $_POST('string') to $_POST['string].

Make Sure You didn't print the html in config file or constructor or something like that. I got the the same problem. Solution is to create separate file to handle the ajax request.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top