Question

我有一个表单将数据发布到服务器端页面，数据被插入到mysql数据库中，然后执行数据库的行计数，结果返回到表单页面，然后显示它。

我正在使用ajax来获取行计数数据，我想知道是否可以延迟Ajax调用，直到数据插入到数据库中，这样我就可以获得包含数据的准确行数刚刚提交？当前代码有效，但仅在提交表单之前显示行计数。我必须重新加载页面才能获得真实的结果。

form.php的

<form class="form-inline" action="" id="myform" form="" method="post">
 <!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name"></label>  
  <div class="col-md-8">
  <input id="name" name="name" type="text" placeholder="name" class="form-control input-lg" required>
    </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit1"></label>
  <div class="col-md-4">
    <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
  </div>
</div>
</form>

<div id="count"></div>
</div>

jquery

<script>
//Post data from form
$(document).ready(function(){
$("#submitButtonId").on("click",function(e){
  e.preventDefault();

var formdata = $(this.form).serialize();
    $.post('server.php', formdata,
           function(data){
  //Reset Form
$('#myform')[0].reset(); 
          });

return false;
});
});
</script>
<script>

//Fetch Rowcount from server.php
  $(document).ready(function(){
$.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                    $("#count").html(data.count);

}
});
});
</script>

Server.php

<?php
//Connect to db
include_once("db_conx.php");
if( isset($_POST['name']) ){
$name= mysqli_real_escape_string($db_conx,$_POST['name']);

//Update Database 
$stmt = $db_conx->prepare('INSERT INTO myTable  set name=?');
$stmt->bind_param('s',$name);
$stmt->execute();
}
//Count Rows
$sql="SELECT name FROM myTable";
$query = mysqli_query($db_conx, $sql);
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($query);

// send output
$my_data=array(count=>"$rowcount");

echo json_encode($my_data,true);
?>

Answer 1

调用在第一个ajax帖子的响应中获取行数的ajax。

<script>
//Post data from form
$(document).ready(function(){
$("#submitButtonId").on("click",function(e){
    e.preventDefault();

    var formdata = $(this.form).serialize();
    $.post('server.php', formdata,
           function(data){
               //Reset Form
               $('#myform')[0].reset(); 
               fetchRowCount();
    });

    return false;
 });
});

function fetchRowCount() {
     $.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                        $("#count").html(data.count);

                    }
     });
}
</script>

Answer 2

您可以在帖子之后调用count行函数，如下所示：

 $.post('server.php', formdata,
     function(data) {
         //Reset Form
         $('#myform')[0].reset();
         $.ajax({
             url: 'data.php',
             dataType: "json",
             success: function(data) {
                 $("#count").html(data.count);
             });)
     });

Answer 3

如果我从代码中正确理解，我会看到Fetch Rowcount在$（document）.ready上执行。这意味着一旦（并且每次）加载页面，它就会被执行。所以它发生了这个：

1）页面已加载

2）执行Fetch rowcount

3）您提交

4）您必须重新加载页面才能转到第2点。

因此解决方案是在执行提交后执行行提取作为回调函数，而不是在文档就绪时执行。

如何延迟Ajax请求？

3 个答案: