$.post function does not seem to be posting

Question

I am new to both javascript and php. I am trying to write a javascript function that will post a string back to the server so that I can capture it and save it in the database. It will eventually post data obtained from the google.maps geocoding api,but for now, I'm just trying to get ANY post to work. I have been able to post to the server with html forms, but not successfully yet using a javascript function, and I have a hunch that I am missing something basic.

I have included the jquery library in my Script.js file with: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

I have then added this function, which I pretty much just copied from the examples in my Script.js file:

<script>
function namepost(){
document.write("Tired of trying to debug this bloody thing");
$.post("test.php",{firstname:"John"});
}
</script>

For testing purposes, I have created the file test.php, and here is the code:

<?php
require_once 'Script.js';
echo "<script>namepost()</script>";
$name = $_POST['firstname'];
print_r($_POST);
echo "Firstname is {$name}";

Here is the output I get when I run the code:

Tired of trying to debug this bloody thingArray ( ) Firstname is

My function is getting called, but it doesn't appear that I am posting firstname because the $_POST gives me an empty array. I can't tell why, and I have been at this for hours and hours. Is there another file I need to include to use the jquery $.post function? Please, help me save the rest of my hair and sanity!

The problem starts with `require_once 'Script.js';`. You should not be requiring JS files from PHP and vice versa. They are two different languages and not compatible with each other directly. If you want to learn web dev, I personally recommend you start with html, javascript and css then move on to PHP or other backend languages later. — Hamza Kubba, Apr 22 '14 at 17:51
Do not use document.write for this kind of testing. Use the console, the innerhtml of a div, the value of a textarea, or an alert. document.write can have unexpected results, such as wiping out all of your page content. — Kevin B, Apr 22 '14 at 17:54
Once you have your jQuery files included make sure to use your browser's console (in the web developer tools) to watch the AJAX request / response. It will typically give you all that you need for troubleshooting problem AJAX requests. — Jay Blanchard, Apr 22 '14 at 17:55
When working with ajax calls, you will want to befriend the console. You can find more info on that here: http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it — Daniel, Apr 22 '14 at 18:51

score 1 · Accepted Answer · answered Apr 22 '14 at 17:58

The jQuery $.post will do an asynchronous POST, so your page won't be updated unless you process the results in javascript:

$.post("test.php", {firstname:"John"}, function(result){ alert(result) });

(The third parameter of $.post is a function that will execute after the server responds).

If you want to do synchronous POST, you will need to use the jQuery $.ajax function, like this:

   $.ajax({
      type: 'POST',
      url: "test.php",
      data: {firstname:"John"},
      success: function(result){ alert(result) },
      async:false
    });

Thanks for explaining about asynchronous, it helped me to understand what was going on, and now I have it working. Kevin B helped greatly too with his testing suggestions. — jenstreetman, Apr 23 '14 at 04:54

score 0 · Answer 2 · answered Apr 22 '14 at 18:00

The html:

<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" language="javascript">
  $(document).ready(function() {
      $("#driver").click(function(event){
          $.post( 
             "/jquery/result.php",
             { name: "Zara" },
             function(data) {
                $('#stage').html(data);
             }

          );
      });
   });
   </script>
</head>
<body>
   <p>Click on the button to load result.html file:</p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Load Data" />
</body>
</html>

The php:

<?php
if( $_REQUEST["name"] )
{
   $name = $_REQUEST['name'];
   echo "Welcome ". $name;
}
?>

Change the values to match yours.

http://www.tutorialspoint.com/jquery/ajax-jquery-post.htm

Tuga, thanks for the working example and link. Now that I understand what is going on a little better, this will be useful. — jenstreetman, Apr 23 '14 at 21:47

$.post function does not seem to be posting

2 Answers2