Jquery ajax call from javascript to PHP

Question

There seems to be a problem with the code I have for calling php from javascript with jquery ajax. The ajax call seems to be successful but I don't get the correct information returned from the php function.

In the php function I create a SQL query. I send back the query as a reponse to debug it before performing a delete query. Here is the HTML for the div to show the query.

 <div id="thenode" style="position: absolute; top: 30px; left: 0px; width: 150px; background-color: white; z-index: 9999;">&nbsp;</div>

Here is the jquery ajax call. There are two variables being sent to the PHP function: nodeid for node to be delete, and option delete for the function.

function deleteitem()
{

     //get selected node
     var selectnod = getCookie('pnodid'); 

     //define php info and make ajax call
     $.ajax({
         url: "uptree.php",
         type: "POST",
         data: { node: selectnod, option: "delete" },
         cache: false,
         success: function (response) {
             $('#thenode').html(response);
         }
     });

}

Here is the PHP function.

<?php

function uptree() {

  $node = $_POST['node'];
  $option = $_POST['option'];

  if($node == '' || $option == '') {
    return '';
  }

  $dbco = mysql_connect('localhost', 'root', 'mmowebdb');
  if (!$dbco)
    {
    die('Could not connect: ' . mysql_error());
    }

  mysql_select_db("pagelinks", $dbco);

  $sql = "DELETE FROM dtree_table WHERE nid='$node'";

  return $sql;
}

?>

Should be straightforward but this ajax call returns an empty string and causes the div in the HTML to disappear. This is the first time I use ajax in an actual project. The problem must be easy to find for someone who knows what ajax really does. Can you tell the problems?

i just wonder why you have to get the selected node via a cookie. are you sure the cookie is written when you send your ajax request? (if you need to have that cookie, why you dont read it out via php?) — Rufinus, Jul 24 '11 at 01:25

user823527 · Accepted Answer · 2011-07-25T19:24:48.617

I found the answer! Thanks to all of you who had suggestions about the SQL call. But here is the actual answer to my question.

There are four steps in making an ajax Javascript to PHP call. The first two steps happen in the Javascript. The other two steps happen in the PHP.

Step 1. In Javascript decide what variables are needed in the PHP function, retrieve them.

Step 2. Make the ajax call to the PHP function. jquery has a convenient way of passing values to PHP. You have a an array of name-value pairs like this in the data item for the ajax call.

 data: { node: selectnod, option: "delete" },

Step 3. Have your PHP function ready in a PHP file. Write the function like this.

function updatetree($node, $option) {

Step 4. Echo a call to the php function within that PHP file.

With these four steps you should have a succesful call to PHP and be able to return information to javascript from the PHP function.

Here is the javascript function.

function deleteitem()
{

     //Get selected node to send to PHP function
     var selectnod = getCookie('pnodid'); 

     //Define php info, specify name of PHP file NOT PHP function
     //Note that by loading the PHP file you will probably execute any code in that file
     //that does not require a function call
     //Send PHP variables in the data item, and make ajax call
     //On success perform any action that you want, such as load a div here called thenode
     $.ajax({
         url: "uptree.php",
         type: "POST",
         data: { node: selectnod, option: "delete" },
         cache: false,
         success: function (response) {
             $('#thenode').html(response);
         }
     });

}

Here is the PHP file uptree.PHP. It has a function defined, called updatetree. It also has an echo statement to call that function. This just seems to be the way to cause the function to run. Ajax itself doesn't call the function.

<?php

//Function defined here
//The variables will come from the ajax data statement
function updatetree($node, $option) {

  if($node == '' || $option == '') {
    return 'Select an item in the tree.';
  }

  $dbco = mysql_connect('localhost', 'root', 'mmowebdb');
  if (!$dbco)
    {
    die('Could not connect: ' . mysql_error());
    }

  mysql_select_db("pagelinks", $dbco);

  $sql = '';
  switch($option) {
     case 'delete':
        $sql = "DELETE FROM dtree_table WHERE nid='$node'";
        break;
     case 'add':
        list($pagename, $address) = explode(",", $page);
        $pagename = trim($pagename);
        $address = trim($address);
        $sql = "INSERT INTO dtree_table (nid, pid, name, url) values (NULL, ".$node.", '".$pagename."', '".$address."')";
        break;
     case 'update':
        break;
  }

  if (!empty($sql)) return $sql;
}

//echo statement to run function, variables sent by ajax are retrieved with $_REQUEST
//they could have also been retrieved with $_GET or $_POST
echo updatetree(trim($_REQUEST['node']),trim($_REQUEST['option']),trim($_REQUEST['page']));

?>

So to recap. Javascript gets variables, makes ajax call to PHP file. Ajax loads PHP file which contains echo statement that causes PHP function to run. That PHP function is defined in that same file. The function return statement sends information back to javascript through ajax. Javascript does something with that information, e.g. load it into a div on the HTML page.

Michael Berkowski · Answer 2 · 2011-07-24T01:20:30.913

You haven't passed $sql into mysql_query();

$sql = "DELETE FROM dtree_table WHERE nid='$node'";

mysql_query($sql);
// -------^^^^^^^^
return $sql;

Your code is vulnerable to SQL injection, as it only checks for an empty $node. As an end user, I could delete any id in the database I wish, or all of them if I ran the code in a loop. You will need something to check that the user running the code has permission to delete the node, and also, call mysql_real_escape_string() on $node.

$node = mysql_real_escape_string($node);
$sql = "DELETE FROM dtree_table WHERE nid='$node'";
$result = mysql_query($sql);

// Check for success...
if ($result) {
  // return success codes to ajax caller
}
else {
  // return error codes to ajax caller
}

ADDENDUM

We don't see the code where you call upTree() in PHP. Are you actually calling the function? If you don't call it and that's your whole PHP script, then it will execute, do nothing, and return a blank HTTP response to your Ajax calling function with a successful 200 response code.

That's not the problem. I previously commented out the call to mysql_query. — user823527, Jul 24 '11 at 01:11
@user823527 see addendum. Post more PHP code if there is more to post. If not, then it's because you aren't calling your function and the whole PHP page just runs, does nothing, and returns nothing to your ajax caller. — Michael Berkowski, Jul 24 '11 at 01:16

score 0 · Answer 3 · answered Jul 24 '11 at 01:13

You actually need to execute the query you create:

  $sql = "DELETE FROM dtree_table WHERE nid='$node'";

  $result = mysql_query($sql);

  return $sql;

Then result will contain a Boolean of success status.

Also when you pass it back to the javascript call you may need to set the appropriate page header of plaintext or json (if you decide to use json)

I highly recommend using a tool like Firebug to watch each ajax request. Then you can see the posted data, response data, and headers to help you diagnose your issue further. Currently only Firefox (AFAIK) fully supports the firebug extension, but firebug lite is also available for other browsers.

You are correct, Chrome does indeed have some built in console interfaces. However, I personally find it harder to use. — Brombomb, Jul 24 '11 at 16:36

score 0 · Answer 4 · answered Jul 24 '11 at 02:34

I send back the query as a reponse to debug it before performing a delete query.

...

this ajax call returns an empty string and causes the div in the HTML to disappear.

I assume you want the query displayed inside your div. You need echo($sql); or echo(uptree()); or equivalent somewhere in your program. You might also create an HTML form that POSTs the same data as your AJAX to see what PHP is returning.

Jquery ajax call from javascript to PHP

4 Answers4

Linked