我有一个按钮,可以从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函数。
答案 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;
});