Question

以下是指向web page和source code的链接。如果你注意到，我有一个＆＃34; Form＆＃34;。一旦用户提交了应用程序，服务器就会通过文件＆＃34; submit.php＆＃34;给他回复。您可以在线验证。

我尝试使用AJAX请求方法来检索它，因此我可以在用户点击按钮后在表单下方发布相同的回复。我是网络开发的新手，我不确定我的AJAX代码有什么问题。任何帮助，将不胜感激。我的submit.php代码如下。对于整个目录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";
?>

在提交按钮onclick事件

时调用askServer

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

以下表格适用于受访者@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";
?>

Answer 1

在你的javascript代码中： -

  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);

    }

在你的PHP代码中： -

将$_POST更改为$_GET

一旦得到正确的响应，根据用户输入更改示例参数。

完整的工作HTML代码： -

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

Answer 2

如果您尝试在提交按钮onclick事件上进行ajax调用，则需要停止默认表单提交事件。

<form onsubmit="return false">

并且您的submit.php需要POST值，因此请发出POST请求。

并且您还需要使用该ajax请求传递变量。

a nice tutorial on ajax post requests

Ajax请求表单

2 个答案: