Question

我正在尝试了解ajax，并希望弄清楚如何在数据输入到该数据库时刷新从mysql数据库中显示行数的div。

我在同一页面上有一个简单的表单，并且数据从表单提交到数据库，如何让div更新＆＃39; live＆＃39;还有？

我在此处发布的代码会从插入mysql数据库的表单中发布一个名称。然后计算数据库中的行数并将其作为json对象返回。一切正常但只在我重新加载页面时刷新行数，我希望它立即刷新。

非常感谢。

表格

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

<!---------Display rowcount from database--------->

jquery

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

var formdata = $(this.form).serialize();
    $.post('data.php', formdata,
           function(data){

 //Reset Form
$('#myform')[0].reset(); 
          });

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

$(document).ready(function() { 

$.ajax({
                    url: 'data.php',
                    dataType: "json",
                    success: function (data) {
                    $("#count").append(data.count);
}
});    
                return false;  
});

</script>

data.php

<?php
//include db configuration file
include_once("db_conx.php");

$name= mysqli_real_escape_string($db_conx,$_POST['name']);
//Update Database
$stmt = $db_conx->prepare('INSERT INTO my_table set name?');
$stmt->bind_param('s',$name);
$stmt->execute();

//Count Rows
$sql="SELECT name FROM utility";
$query = mysqli_query($db_conx, $sql);
  // Return the number of rows in result set
  $rowcount=mysqli_num_rows($query);

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

echo json_encode($my_data,true);

?>

Answer 1

如果您希望服务器将事件推送到客户端，则可以使用Websockets。像Pusher这样的服务可以提供帮助，它有一个免费的计划（100个连接，每天200K消息）和一个很好的文档，可以与PHP和一些流行的框架集成。

如果您不想使用websockets，您可以使用更传统的轮询：每隔X秒，您向服务器发出GET请求计数，如果更改则更新它，如果你什么都不做，等待下一个电话。这可以使用Javascript中的setTimeout()轻松设置。

Answer 2

使用PHP + ajax，您应该每隔X次查询数据库并超时（setTimeOut()）。

您可以使用websockets或查看firebase。

另外，我建议您将.append(data.count);更改为.html(data.count);以“清除”div，否则，您可能会有多个“data.count”。

此处有一篇文章，其中包含大量答案：What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet?

使用Ajax立即刷新

2 个答案: