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

Question

我的 jquery ajax 调用正在更新我的数据库，但它没有更新页面。 success参数不太清楚请帮忙

j查询:

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

这是需要更新的部分:

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

Answer 1

您必须记住，jQuery 和 PHP 是完全独立的，并且在您刷新之前，简单地更新数据库中的数据不会更新您页面上的数据，因为 PHP 代码只会在页面第一次运行时运行负载，而不是之后。您需要做的是在 jQuery ajax 调用中使用您的 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
              })
          )
      )
  )
})

此代码段假定您的用户对象具有属性名称、用户 ID、用户状态和操作，并且用户响应只是一个用户对象数组。

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

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

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