将内容异步加载到div中,在php中回显

时间:2014-08-24 13:00:08

标签: php jquery json asynchronous

我有一个按钮,可以从MySQL服务器加载一个艺术家列表,每个艺术家都有一个与之相关的链接和一个用于添加内容的div。该链接提取与该艺术家有关的歌曲数据。我想以异步方式加载歌曲数据,但由于URL编码和使用PHP动态生成div,我无法解决如何操作的问题。

我的页面。

    <html> 
    <head> 
        <title>BadNoise</title> 
    </head> 
    <body> 
        <form action="Artist.php" method="post"> 
            <fieldset> 
                <p> <input type="submit" value=" Search Our Artists" /> </p> 
            </fieldset> 
        </form> 

        <?php
$con=mysqli_connect("localhost","ee2800","secret","ee2800");

if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($_SERVER["REQUEST_METHOD"] == "POST")

$result = mysqli_query($con,"SELECT * FROM artist LIMIT 10");

if($_SERVER["REQUEST_METHOD"] == "POST")

echo " <h2>List of BadNoise Artists</h2>
    <table border='0'>
<tr>
<th>Artist Number</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Search Songs</th>

</tr>";

while($row = mysqli_fetch_array($result)) {
  echo "<tr>";
  echo "<td>" . $row['ArtistNumber'] . "</td>";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo '<td> <a href="test4.php?name='. urlencode($row['ArtistNumber']).'">Search Songs</a></td>';
  echo "</tr>";
  echo "<td><div id=" . $row['ArtistNumber'] . "></div></td>";

}

echo "</table>";

$results->close();
mysqli_close($con);
?>

获取歌曲信息的文件。

    <?php

$row = $_GET['name'];
echo $_GET['name'];

$dbs = new mysqli("localhost", "ee2800", "secret", "ee2800");

$results = $dbs->query("SELECT * FROM songs WHERE ArtistNumber = {$_GET['name']};");

$rows = array();
while ($r = mysqli_fetch_array($results)) 
  {
    $rows[] = $r;
  }

  echo json_encode($rows);
?>

编辑!

这是我对ajax的尝试......

   $("#dynamic").click(function() {

   $.getJSON( "test4.php", function(obj){
            $.each(obj, function(key, value) {
               $("#dynamic").append("<p>"+value.Title+"</p>");

               return false;
            });
        });


});

我将div id更改为dynamic并将#替换为#。 我知道这不是很正确,因为它在一个没有url编码的测试页面上工作并使用了一个html div而不是一个用php回显的div。我不确定如何将查询传递给查询以获取歌曲数据,然后一起使用ajax函数。

1 个答案:

答案 0 :(得分:0)

在你的while循环中尝试这个

echo '<td> <a href="#'.urlencode($row['ArtistNumber']).'">Search Songs</a></td>';

和你的js

$(window).on('hashchange', function(){
      var qryStr = '?name='+ window.location.hash.split('#')[1]
     $.getJSON( "test4.php"+qryStr, function(obj){
            $.each(obj, function(key, value) {
               $("#dynamic").append("<p>"+value.Title+"</p>");


            });
        });
  return false;

});