javascript - 如何将数据发布到服务器并捕获响应

Question

我是网络开发的新手，一直在向服务器发送数据。我有注册表，我想将此数据发送到服务器。我可以使用 action 和 method 属性从表单标签发送数据，但它将在下一页返回响应。所以我在某处读到我必须使用 ajax 发送数据。我试过了，但我无法使用脚本发送和捕获数据。

这是我的回复

{"success":true}

HTML代码

<div class="form">
 <div class="formdetail">
    <h3>Individual Registration</h3>

<label for="fname"> Name</label><br>
<input type="text" size="40" id="name" name="name" placeholder="Enter your name.." required><br><br>



   <label for="phonenumber">Mobile Number</label>
        <br/>
        <input id="mobileno"  size="40" name="mobileno" type="tel" size="20"  maxlength="13" placeholder="Enter your mobile number..." type="number" required><br><br>


<label for="email">Email-Id</label><br>
<input type="text" size="40" id="email" name="email" placeholder="Enter your email-id..." required><br><br>



    <input type="date" id="dt" onchange="mydate1();" hidden/>
   <input type="text" id="ndt" name="dob" onclick="mydate();" hidden />
 <input type="button" Value="Date of Birth" onclick="mydate();" />

 <script>

 function mydate()
{
//alert("");
document.getElementById("dt").hidden=false;
document.getElementById("dob").hidden=true;
}
function mydate1()
{
 d=new Date(document.getElementById("dt").value);
 dt=d.getDate();
 mn=d.getMonth();
 mn++;
 yy=d.getFullYear();
 document.getElementById("dob").value=dt+"/"+mn+"/"+yy
 document.getElementById("dob").hidden=false;
 document.getElementById("dt").hidden=true;
 }

</script>
<br><br>
  <label for="address">Address</label><br>
<input type="text" id="address"  size="40" name="address" placeholder="Enter your address..." required><br><br>

<label for="country">Country</label><br>
<input type="text" id="country" size="40"  name="country" placeholder="Enter your country name....." required><br><br>

 <label for="State">State</label><br>
<input type="text" id="state" size="40" name="state" placeholder="Enter your state name....." required><br><br>

  <label for="city">City</label><br>
<input type="text" id="city" size="40" name="city" placeholder="Enter your city name....." required><br><br>
     <input type="hidden" name="category" value="Individual">
<input type="submit" value="Submit" id="someInput" onclick="ajax_post()"><br>

<a href="log1.html"><p class="small">Institute Registraion</p></a>
</div>
</div>
</form> 

 <script type="text/javascript">
 function ajax_post(){
 var hr = new XMLHttpRequest();
var url = "https://smilestechno.000webhostapp.com/Register.php";


hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function(){
  if (hr.readyState == 4 && hr.status == 200) {
    var resp = console.log(response);
    if (resp == "true") {

  }
}
hr.send("name="+ name + "&mobileno=" + mobileno + "&email=" + email + "&dob=" + dob + "&address=" + address + "&city=" + city + "&state=" + state + "&country=" + country );
document.getElementById("status").innerhtml = "processing";
}

Answer 1

您不能以这种格式发送变量。

var vars = name+mobileno+email+dob+address+city+state+country;

Params 必须具有如下格式:

hr.send("fname=Henry&lname=Ford");

你需要的代码:

hr.send("name=" + name + "&monbileno=" + mobileno + ... );

您可以使用 jquery 以简单的方式使用 ajax。

引用:

• xmlhttprequest https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
• jquery ajax https://www.w3schools.com/jquery/jquery_ref_ajax.asp