logo标签列表

如何向服务器发送数据并捕获响应

javascriptphphtmljsonajax
3

我是一名新手网页开发者，目前遇到了将数据发送到服务器的问题。我有一个注册表单，想要将这些数据发送到服务器。我可以使用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";
}

1
你遇到了什么问题？ - 31piy
当我使用脚本时，它没有将数据存储在服务器上... 我很困惑如何捕获JSON对象。 - user9372546
如果您能够成功发布数据，则可能需要查看您的后端API代码（PHP）以处理请求！（“vars”将成为您的请求正文的一部分） - Chanakya Vadla
http://php.net/manual/en/reserved.variables.request.php - Chanakya Vadla
是我看漏了还是你在开头缺少了<form ...标签？不过我看到你有结束标签</form>... - Gwyneth Llewelyn
4个回答
2
2

使用jQuery会更加方便。以下是使用jQuery Ajax以fname和email为例的示例：

<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”部分替换为处理数据的url /文件。
该文件可以是一些基本的php文件，将数据存储到某个数据库中，并返回或回显一些内容，以便您可以在ajax成功函数的“responseData”中使用它。
希望这可以帮助您！
0
请这样调用函数
onclick="ajax_post()"

不是

onclick="ajax_post"

你使用了getElementById，但选择了一个name属性，必须使用id属性

getElementById('fname').value;

不是

getElementById('name').value;
0

嘿，我建议使用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'];
?>
如何在提交按钮的onclick事件中调用此函数...它显示ajax_post未定义。 - user9372546
请跟进脚本，确保js文件已包含在同一文件中，如果失败，则需要重构以使用@Galanx的答案。这是我之前发布的帖子。 - Moses
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接