jquery ajax调用成功运行,但页面未更新


jquery ajax call successfully running but page not updating

我的jquery ajax调用正在更新数据库,但没有更新页面。我不清楚成功的参数请帮助

jquery:

<script type="text/javascript">
   function changeStatus(userStatus,userId) {
      var getParameters = "userStatus = " + userStatus + "&userId = " + userId;
      $.ajax({
         type: 'GET',
         url: 'blogUsers.php',
         data: getParameters,
         success: function() {
         }
      });
   }
</script>

php:

<?php
   if( isset( $_GET['userId'] ) && isset( $_GET['userStatus'] ) ) {
      $userId = $_GET['userId'];
      $userStatus = $_GET['userStatus'];
      switch( $userStatus ) {
         case "1":
            $changeStatus=0;
            break;
         case "0":
            $changeStatus=1;
            break;
        default:
            $changeStatus="";
   }
   $Query = "UPDATE blog_users SET blog_user_status='$changeStatus' WHERE blog_user_id='$userId'";
   $Result = mysql_query( $Query );
}
?>

这就是用户网格在页面上的显示方式:

function viewUsers() {
$Query="SELECT * FROM blog_users";
$Result=mysql_query($Query);
while ($row=mysql_fetch_array($Result)) {
    $userId=$row['blog_user_id'];
    $userName=$row['blog_user_name'];
    $userEmail=$row['blog_user_email'];
    $userStatus=$row['blog_user_status'];
?>
<tr><td><?php echo $userId; ?></td>
<td><?php echo $userName; ?></td>
<td><?php echo $userEmail; ?></td>
<td><?php if($userStatus==1){echo "Active";}else echo "Banned"; ?></td>
<?php
$action="";
switch($userStatus){
    case "1":
        $action="Ban User";
        break;
    case "0":
        $action="Activate User";
        break;
    default:
        $action="";
}
?>
<td><a href="#" onclick="changeStatus(<?php echo $userStatus; ?>,<?php echo $userId; ?>);"><?php echo $action; ?></a></td>
<?php } } ?>

这就是我如何将函数称为"

<td><a href="#" onclick="changeStatus(<?php echo $userStatus; ?>,<?php echo $userId; ?>);"><?php echo $action; ?></a></td>

thsi是需要更新的部分:

<table class="tablesorter" cellspacing="0"> 
    <thead> 
        <tr> 
        <th class="header">userId</th> 
        <th class="header">userName</th> 
        <th class="header">userEmail</th>
        <th class="header">userStatus</th>
        <th class="header">Actions</th>                     
        </tr> 
    </thead> 
    <tbody> 
        <?php viewUsers(); ?>
    </tbody> 
</table>

实际上,$action变量应该更改为Activate user或Bann user on click!

您必须记住,jQuery和PHP是完全独立的,在刷新之前,简单地更新数据库中的数据不会更新页面上的数据,因为PHP代码只会在页面首次加载时运行,而不会在加载后运行。您需要做的是在jQueryajax调用中使用success方法。将ajax调用更改为

$.ajax({
    type:'GET',
    url:'blogUsers.php',
    data:getParameters,
    success:function(data, status, jqxhr) {
      ... set users in view here ...
    }
  });
}

您从服务器返回的数据格式是什么?blogUsers.php是返回HTML,还是返回用户的JSON数组?如果是html,您可以简单地将响应函数的主体设置为

$(".tablesorter tbody").html(data)

但我认为您最有可能返回JSON?

如果是,那么您需要从成功方法中生成HTML。像这样的东西应该起作用:

$(".tablesorter tbody tr").remove();
$.each(data, function(user){
  $(".tablesorter tbody").append(
      $("<tr></tr>").append(
          $("<td></td>").append(
              $("<a></a>", {
                  href: "#",
                  onclick: "changeStatus(" + user.userStatus ", " + user.userId + ")",
                  text: user.action
              })
          )
      )
  )
})

这个代码段假设您的用户对象具有属性name、userId、userStatus和action,并且用户响应只是一个用户对象数组。

显然,你会想以你想要的格式构建html,这只会生成

<tr>
    <td>
        <a href="#" onclick="updateStatus(status, id);">Action here</a>
    </td>
</tr>

但它让您大致了解了它将如何工作

您几乎完成了所有的代码。我确信的是,php代码是在通过onclick事件更新表之前执行的,它是显示更新数据的代码。

尝试重新加载页面,如:

success:function() { //you will not have to pass any parameter 
                     on the function because you all done the show data in your `viewUsers()`.
  //your page here, e.g window.location.href: 'bla2.php';     
}