Question

这是我在过去3天里一共停留了大约7个小时的事情，这让我非常疯狂。您可以借给我的任何帮助都将受到高度赞赏。

基本上我想：

在pageload上调用PHP函数，随机选择一条记录我的MySQL数据库
在HTML页面中动态显示该记录

（一旦我解决了这个问题，我也希望能够通过点击按钮触发此过程。）

在处理此任务之前，我整理了一个原型，通过HTML下拉菜单动态显示特定记录：http://lrdondmt.com/week13/ajaxprototype1.html

我一直在尝试修改此代码以实现上述目标。

我的PHP看起来像这样：

<?php

// connect to database

    $username= "**withheld**"'
    $password="**withheld**";
    $database="**withheld**";
    $table="banddb";
    mysql_connect(localhost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");

// the query itself, selects random record from database

    $sql="SELECT * FROM banddb WHERE id >= (SELECT FLOOR( MAX(id) * RAND()) FROM quotes ) ORDER BY id LIMIT 1";
    $result = mysql_query($sql);

// echo result

while($row = mysql_fetch_array($result))
  {
    echo '<b>Band name:</b>&nbsp;' . $row['bandname'] . '</br></br>';
    echo '<b>Location:</b>&nbsp;' . $row['city'] . ',&nbsp;' . $row['state'] . '</br></br>';
    echo '<b>Image:</b> </br></br>' . '<img src="http://lrdondmt.com/discovermusic/images/' . $row['imgpath'] . '" />' . '</br></br>';
    echo '<b>About the band: </b>' . $row['abouttheband'] . '</br></br>';
    echo '<a href="' . $row['bandcamplink'] .  '"><img src="http://www.lrdondmt.com/discovermusic/images/bandcamp-icon.png" alt="Find on the band on Bandcamp" /></a>' . '</br></br>';
    echo '<a href="' . $row['facebooklink'] .  '"><img src="http://www.lrdondmt.com/discovermusic/images/facebook-icon.png" alt="Find on the band on Facebook" /></a>' . '</br></br>';
    echo '<b>Bandcamp player:</b> </br></br>' . '<iframe width="300" height="100" id=bandcampplayer src="http://bandcamp.com/EmbeddedPlayer/v=2/album=' . $row['bandcampid'] . '/size=grande/bgcol=e9e9e9/linkcol=890101/" allowtransparency="true" frameborder="0" >' . '</br></br>';
  }
echo "</table>";

// close connection 

mysql_close();

?>

我的HTML文档如下所示：

<!DOCTYPE html>

<html>
<head>

    <title>AJAX prototype 2</title>

<script type="text/javascript" >    
    function showRecord()
    {
          {
          document.getElementById("txtHint").innerHTML="";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    xmlhttp.open("GET","getmusic2.php",true);
    xmlhttp.send();
    }
    </script>

    <script type="text/javascript" >
        $(document).ready(function(showRecord))
    </script>

</head>

<body>

<div id="txtHint">
    <em>Your content should appear here.</em>
</div>

</body>
</html>

如果您需要任何进一步的信息，请询问。

Answer 1

由于您已经在使用jQuery，因此可以使用这个更简单的jQuery函数替换整个showRecord（）函数：

$.ajax({
     url: 'getmusic2.php',
     success: function(data) {
         $('#txtHint').html(data);
     }
});

此外，您的加载呼叫应如下所示：

$(document).ready(function() {
    showRecord();
});

Answer 2

调用你的ajax函数时，你的闭包看起来不对，修正了这一行

$(document).ready(function(showRecord))

看起来像这样

$(document).ready(function(){showRecord()})

通过PHP调用页面加载的随机记录，通过AJAX动态显示结果

2 个答案: