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

Question

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

这是我的回答

{“成功”：真}

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;

参数必须具有如下格式：

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

你需要的代码：

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

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

参考：

• xmlhttp请求https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp
• jquery ajax https://www.w3schools.com/jquery/jquery_ref_ajax.asp

Answer 2

使用jquery，它更容易。这就是它应该如何使用 fname 和 email 作为 jquery ajax 的示例：

<form name="myForm" id="myForm" action="myActionUrl" method="POST">
  <input type="text" name="fname" id="fname">
  <input type="email" name="email" id="email">
  <input type="submit" value="Submit">
</form>
 <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>

<script>

$("#myForm").on("submit", function(event){
   event.preventDefault(); //this prevents the form to use default submit

   $.ajax({
     method: "POST",
     url: $(this).attr("action"), //this will use the form's action attribute
     data: {fname: $("#fname").val(), email: $("#email").val()},
     success: function(responseData){
      //do something here with responseData
     }
   });
});

</script>

请将“myActionUrl”部分替换为处理您数据的网址/文件。

该文件可以是一些基本的 php 文件，它将数据存储到某个数据库中并返回或回显某些内容，以便您可以在 ajax 成功函数的“responseData”中使用它。

希望这会有所帮助！

Answer 3

请这样调用函数

onclick="ajax_post()"

不是

onclick="ajax_post"

您使用了 getElementById 但选择了名称属性 必须使用

getElementById('fname').value;

不是

getElementById('name').value;

Answer 4

嘿，我建议使用 jquery 来完成这项任务。

这是客户端脚本

script type="text/javascript" src='jquery.js'></script>
  <!-- download the lates version -->
<script type="text/javascript">
 ajax_post(){
  var url = "https://smilestechno.000webhostapp.com/Register.php";
  var name = $("#name").val();
  var mobileno = $("#mobileno").val();
  var email = $("#email").val();
  var dob = $("#dob").val();
  var address = $("#address").val();
  var city = $("#city").val();
  var state =  $("#state").val();
  var country = $("#country").val();

  var tmp = null;
   $.ajax({
    'async': false,
    'type': "POST",
    'global': false,
    'dataType': 'json',
    'url':url,
    'data':{name:name,mobileno:mobileno,email:email,dob:dob,address:address,city:city,state:state,country},
    'success': function (data) {
        tmp = data;
    }
});
return tmp; // you can access server response from this tmp variable

}

服务器端

 <?php
  //get items as post inputs
   print_r($_POST[]);
  echo $_POST['name'];
?>