php - 在 jQuery Ajax 函数之后返回 HTML(使用 PHP)

Question

我正在尝试将 Ajax 与 jQuery 结合使用，以便当您在我的自定义论坛中单击用户名时弹出一个小窗口。

我当前的脚本代码:

$(document).ready(function () {
    $('#profile_link').click(function () {

        $.ajax({
            type: 'POST',
            url: 'viewuser.php',
            dataType: 'html',
            contentType: 'text/html',
            data: {
                username: $('#username').val()
            },
            success: function (html) {
                $('#message').addClass('success');
                $('#message').hide().append(html).fadeIn();
            }
        });

        return false;
    });
});

我尝试使用 html()，但这根本不起作用，因为它甚至没有显示响应，即使我可以在 Firebug 中看到响应。

这是 viewuser.php 的代码:

        <?php 
      $docRoot = getenv("DOCUMENT_ROOT");

      require_once $docRoot.'/settings.php';

      loginMySQL();

      selectDatabase();

      $user = $_POST['username'];

      $sql = mysql_query ("SELECT `UserName`,`Avatar`,`Biography`,`Birthday`,`UserLevel`,`BanStatus` FROM users WHERE `UserName` = '$user'");

      $UserInfo = mysql_fetch_array($sql);
       $UserAvatar = $UserInfo['Avatar'];
       $UserBio = $UserInfo['Biography'];
       $UserBirth = $UserInfo['Birthday'];
       $UserLevel = $UserInfo['UserLevel'];
       $BanStatus = $UserInfo['BanStatus'];

   // additional code
   ...
      ?>
      <div class="nav_space">
      </div>
// additional code
      <div class="user_profile_wrapper">
       Hello
       <?=$BanStatus;?>
       <i>Username / Power level:</i>
       <div class="user_profile_name" <?=$LevelColour;?>>
       <?=$user;?> <i><?=$UserLevel;?></i>
       </div>
       <i>User avatar:</i>
       <div class="user_profile_avatar">
      <?
       if (strlen($UserAvatar) > 1) {
       ?>
       <img/ src="<?=$UserAvatar;?>" alt="" width="100" />
       <?
       }
      ?>
       </div>
       <i>Biography:</i><br />
       <div class="user_profile_bio">
       <?=$UserBio;?>
       </div>
       <i>Birthdate:</i>
       <div class="user_profile_birthdate">
       <?=$UserBirth;?>
       </div>
       <?=$AUserLevel;?>
      </div>
      <div class="nav_space">
      </div>

问题是，当它返回代码时，它实际上并不显示任何变量($BanStatus、$UserLevel 等)。

有什么想法吗？

Answer 1

理想情况下，您不应在 <?php 之间进行更改和<?因为我相信对短标签的支持正在被放弃。

此外，您还没有清理您的用户名

$user = mysql_real_escape_string  ($_POST['username']);

更新1

下面的代码是一个工作示例，我已经稍微清理了您的代码。但是，随着您的原始代码更改username : $('#username').val() 至username : $('#username').html()应该适合你。

so.html 代码

  <a href="www.google.com" id="profile_link"><div id="username">Someusername</div></a>

  <div id="message"></div>
<script>
  $("#profile_link").click(function(event){
    event.preventDefault();
    var v_username = $("#username").html();
    $.post("viewuser.php",{"username": v_username},function(data) {
      $('#message').addClass('success').hide().html(data).fadeIn();
    }, "html");

  });
</script>

viewuser.php 代码

<?php
echo "The submitted request was for the username $_POST[username]";
?>

输出:

The submitted request was for the username Someusername

更新2

so.html 代码

  <a href="www.google.com" class="profile_link"><span class="username">Username1</span></a>
    <a href="www.google.com" class="profile_link"><span class="username">Username2</span></a>

  <div id="message"></div>
<script>
  $(".profile_link").click(function(event){
    event.preventDefault();
    var v_username = $(this).children(".username").html();
    $.post("viewuser.php",{"username": v_username},function(data) {
      $('#message').addClass('success').hide().html(data).fadeIn();
    }, "html");

  });
</script>

我已经为您再次更新了。我们使用 $(this).children(".username") 来确保我们从所选链接返回用户名。我们已更改为使用类，因为现在每个元素都有多个实例，并且我已将 html 更改为使用 span 标记，因为它更合适一点。