我有一个表单,它将数据发布到服务器端页面,在那里数据被插入到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>
服务器.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);
?>
调用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>
您可以在帖子后面调用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);
});)
});
如果我从代码中正确理解,我会看到Fetch Rowcount是在$(document).ready上执行的。这意味着一旦(以及每次)加载页面,就会执行它。所以事情是这样的:
1) 页面已加载
2) 执行提取行计数
3) 您提交
4) 您必须重新加载页面才能转到第2点。
因此,解决方案是在执行提交后将行提取作为回调函数来执行,而不是在文档就绪时执行。