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

时间:2013-06-24 00:12:37

标签: php jquery

我的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变量应该在点击时更改为激活用户或Bann用户!

2 个答案:

答案 0 :(得分:2)

你必须记住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?

如果您是,那么您需要在success方法中生成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>

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

答案 1 :(得分:0)

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

尝试重新加载页面,如:

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';     
}