1

这是我在过去 3 天里总共坚持了大约 7 个小时的事情，这让我非常疯狂。非常感谢您可以借给我的任何帮助。

基本上我想：

  1. 在页面加载时调用 PHP 函数，该函数从我的 MySQL 数据库中随机选择一条记录

  2. 在 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>

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

4

2 回答 2

1

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

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

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

$(document).ready(function() {
    showRecord();
});
于 2012-11-03T09:09:09.807 回答
0

调用 ajax 函数时，您的闭包看起来不对，请修复此行

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

看起来像这样

$(document).ready(function(){showRecord()})
于 2012-11-03T09:00:59.280 回答