CODEWITHSUNDEEP
javascriptjqueryajax
rockmerockme
rockmerockme

Reputation: 129

ajax send data from client(js) to server(php)

<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?

Upvotes: 1

Views: 3999

Answers (4)

rockmerockme
rockmerockme

Reputation: 129

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";
       }

    ?>

Upvotes: 1

hamed
hamed

Reputation: 8033

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;

    });
});

Upvotes: 0

Jasen
Jasen

Reputation: 14250

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.

Upvotes: 1

Shyam Ranpara
Shyam Ranpara

Reputation: 624

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'];

Upvotes: 0

Related Questions