Ajax请求表

Here are the links to my web page and source code. If you notice, I have a "Form". Once the user submits the application, the server gives him a reply through the file "submit.php". You can verify this online.

I'm trying to use that server reply by using AJAX request method to retrieve it, so i can post the same reply under right under the form once the user clicks on the button. I'm a newbie to web development, and I'm not sure what is wrong with my AJAX code. Any help would be appreciated. My submit.php code is below. For the whole directory click here

<?php
$name = $_POST['name'];
$email=$_POST['email'];
$bday = $_POST['bday'];

echo "Reply from the server:";
echo "<br>";
echo "Thanks for your interest in our product!";
echo "<br>";
echo "We have filed the following Info:";
echo "<br>";
echo "Name: ";
echo "$name";
echo "<br>";
echo "E-mail: ";
echo "$email";
echo "<br>";
echo "Birthday: ";
echo "$bday";
?>

askServer is called upon submit button onclick event

var req = new XMLHttpRequest();
function askServer() {

  req.open("GET", "submit.php", true);
  req.onreadystatechange = handleServerResponse;
  req.send();

  document.getElementById("Sreply").innerHTML = "The request has been sent.";
}


function handleServerResponse() {
  if ((req.readyState == 4) && (req.status == 200))
 {
    var Sreply = 
req.responseText;
    document.getElementById("Sreply").innerHTML = "The answer is: " + Sreply;
  }
}

The below form is for the respondent @gaurav

<?php
$name = $_POST['name'];
$email=$_POST['email'];
$bday = $_POST['bday'];

echo "Reply from the server:";
echo "<br>";
echo "Thanks for your interest in our product!";
echo "<br>";
echo "We have filed the following Info:";
echo "<br>";
echo "Name: ";
echo "$name";
echo "<br>";
echo "E-mail: ";
echo "$email";
echo "<br>";
echo "Birthday: ";
echo "$bday";
?>

If you are trying to make your ajax call on submit button onclick event, you need to stop the default form submit event.

<form onsubmit="return false">

and your submit.php needs POST values, so make a POST request.

and you also need to pass the variable with that ajax request.

a nice tutorial on ajax post requests

In you javascript code:-

  function askServer() {

     var http = new XMLHttpRequest();
var url = "submit.php";
var params = "name=samplename&email=test@example.com&bday=12-01-1993";
http.open("GET", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
       document.getElementById("Sreply").innerHTML = "The answer is: " + http.responseText;
    }
}
http.send(params);

    }

In you php code:-

change $_POST to $_GET

once you get the right response change the example params according to the user input.

complete working html code:-

 <form id="appForm" action="" method="post">
     <label for="Name">Name </label> <br>
     <input id="name" name="name" placeholder="Han Solo" required> <br>
     <label for="e-mail"> Email</label> <br>
     <input name="email" id="email" placeholder="example@uiowa.edu" required> <br> 
     <label for ="Birthdate">Birth Date</label><br>
     <input name="bday" id="datepicker" placeholder="mm/dd/yyyy">        
     </fieldset><br>
     <input class="btn-style" type="submit" value="Submit Application" onclick="askServer();return false;">
     </form>
         <p id="Sreply"></p>
         <script>
          function askServer() {

     var http = new XMLHttpRequest();
var url = "submit.php";
var params = "?name=samplename&email=test@example.com&bday=12-01-1993";
var url = url+params;
http.open("GET", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById("Sreply").innerHTML = "The answer is: " + http.responseText;
    }
}
http.send(params);

    }
    </script>