1
<html>
<head>
<script> src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
/*$(document).ready(function(){
$("p").click(function(){
     event.preventDefault() 
    $.post("/response.php",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
   );
});
 });*/
 $(document).ready(function(){
  $("p").click(function(){
      event.preventDefault();
      $.ajax({
        type: "POST",
        url: "/response.php",
        data: {name: "Donald Duck", city: "Duckburg"},
        cache: false,
        success: function(html){
            $(".make").html(html);
        } 
      });

   });
 });
 </script>

 </head>
 <body>

 <form action="http://localhost/response.php" />
 <p><input type="submit" value="Send an HTTP POST request to a page and   get the result back"></p>
</form>
</body>
</html>

hi, I tried to learn the ajax to send data from client(js, html) to server(php), I tried ajax. post(), but it seems to work like load data from the server, so how to make it work to send data to server?

rockmerockme
  • 131
  • 3
  • 13
  • What do you mean with *"it seems to work like load data from the server"* ? – DontVoteMeDown Mar 19 '15 at 18:11
  • 1
    `$("button").click` - you do not have any `button` elements in your html, therefore the form is submitted normally – Igor Mar 19 '15 at 18:12
  • You'll need to intercept the standard form submission. e.g. `event.preventDefault()` because you are doing an AJAX post in your javascript. – Jasen Mar 19 '15 at 18:14

4 Answers4

1

You are getting undefined values because the standard form submission is executed before your AJAX post. Your form, besides the submission button, does not contain inputs so no data is sent. You do set up your AJAX to post values but that never gets a chance to execute.

$("form").on("submit", function(event) {
    event.preventDefault();  // stop standard form submission

    var data = { name: "Donald Duck", city: "Duckburg" };

    $.post("/response.php", JSON.stringify(data),
    function(result) { });
    ...
});

You'll also likely to need this handle json request in PHP.

Community
  • 1
  • 1
Jasen
  • 14,030
  • 3
  • 51
  • 68
1

In fact it is not the send data function has problem, it is the server handle part have problem, we could not simply use "echo $_POST['name']" get the value. but if we insert that to the database, it is truly there, even though the "undefined name" warning still exits. Here is the server handler part

 <?php
 mysql_connect("localhost","root");
  mysql_select_db("PeerPrediction");
  $result_set=mysql_query("SELECT*FROM GuessOfNum");
  $num_messages=mysql_num_rows($result_set);


   $name=$_POST["name"];
   $guessnum=$_POST["guessnum"];
   $taskid=$_POST["taskid"];
   $effort=$_POST["effort"];

   $query=mysql_query("INSERT INTO GuessOfNum(name,guessNum,taskid,effort)values('$name','$guessnum','$taskid','$effort')");

   if($query){
      echo "Your comment has been sent";
      }
   else{
      echo "Error in sending your comment";
       }

    ?>
rockmerockme
  • 131
  • 3
  • 13
0

Try to use $.ajax in this way:

$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            type: "POST",
            url: "/response.php",
            data: {name: "Donald Duck", city: "Duckburg"},
            success: function(html){
            } 
        });

    });
});

Now, in your response.php you have these values: $_POST['name'] is equal to "Donald Duck" and $_POST['city'] is equal to "Duckburg".

Update: change your html form to this:

<form id="form" />
    <p><input type="submit" value="Send an HTTP POST request to a page and   get the result back"></p>
</form>

Then try to change javascript function:

$(document).ready(function(){
    $("#form").submit(function(){
        $.ajax({
            type: "POST",
            url: "/response.php",
            data: {name: "Donald Duck", city: "Duckburg"},
            success: function(html){
            } 
        });
      return false;

    });
});
hamed
  • 7,939
  • 15
  • 60
  • 114
  • current problem is i could not send name value to response.php: Notice: Undefined index: name in /Applications/XAMPP/xamppfiles/htdocs/response.php on line 3 – rockmerockme Mar 19 '15 at 18:22
  • still could not echo $_POST['name']...If i add sth like success:function(html){alert"success"}. and it truly print the success out, is that mean it already transferred? thx – rockmerockme Mar 19 '15 at 20:25
  • Yes, if success event fired, this means your ajax request completed successfully. – hamed Mar 19 '15 at 20:36
0

you change your script code

<script> $(document).ready(function(){ $("input[type='submit']").click(function(){ $.ajax({ type:'GET', url:"http://localhost/response.php", data: "name=Donald Duck&city=Duckburg", success:function(data){ /*success data*/ }
}); }); }); </script>

You can get variable in php with echo $_POST['city']; and echo $_POST['name'];

Shyam Ranpara
  • 624
  • 4
  • 8