Question

我有一个链接，它将查询字符串发送到PHP文件，该文件将来自Mysql服务器的数据作为JSON返回。我想将这个JSON数据放入一个DIV，它的ID与发送到PHP文件的查询字符串相匹配。

这是我生成的PHP链接和DIV

<html> 
<head> 
    <title>BadNoise</title> 



</head> 
<body> 



    <form action="Artisttest.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 class="dynamic" href="test4.php?name='. urlencode($row['ArtistNumber']).'">Search Songs</a></td>';
  echo "<td><div id=" . $row['ArtistNumber'] . "></div></td>";
  echo "</tr>";
}

echo "</table>";

$results->close();
mysqli_close($con);
?>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="general.js"></script>
    </body>

这是返回JSON数据的PHP文件

<?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);
?>

这是我尝试与JS异步执行此操作。

$(function() {
    $("a.dynamic").click(function(e) {
       e.preventDefault();
       var destDiv = $(this).closest('tr').find('td').last().find('div[id]');
       $.getJSON( this.href, function(obj){
            $.each(obj, function(key, value) {
               destDiv.append("<p>"+value.Title+"</p>");
            });
       });
    });
});

我认为我走的是正确的道路，但我在定位DIV方面遇到了麻烦。

这是你的意思吗？

</tr><tr><td>1</td><td>Steve</td><td>Perry</td><td> <a id="dynamic" href="test4.php?name=1">Search Songs</a></td></tr><td><div id=1></div></td>

Answer 1

由于您要在点击源所在的同一行添加内容，因此您可能不需要div的id以便在其中添加内容。使用点击的链接使用tr确定父.closest()，使用.find()和.last()深入查看div。

由于您可能有多个链接，我建议使用类.dynamic而不是ID。 <td> <a class="dynamic" href="test4 ....

这应该这样做：

$(function() {
    $("a.dynamic").click(function(e) {
       e.preventDefault();
       var destDiv = $(this).closest('tr').find('td').last().find('div[id]');
       $.getJSON( this.href, function(obj){
            $.each(obj, function(key, value) {
               destDiv.append("<p>"+value.Title+"</p>");
            });
       });
    });
});

<强>更新

上述代码已经过编辑，包含DOM ready。

Concept verification - ＆gt;点击DOM ready链接a.dynamic后，该链接无法导航到该链接。

异步将数据放入动态生成的div中

1 个答案: