[mysql]以异步方式将数据放入一个 div,动态产生

标签: json jQuery MySQL PHP
发布时间: 2017/4/8 20:50:13
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个链接,将查询字符串发送到从一个 Mysql 服务器以 json 格式返回数据的 PHP 文件。我想要把这个 JSON 数据放进有 ID 相匹配的查询字符串发送到 PHP 文件的 DIV。

这里是我的 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>

这里是一个 PHP 文件,返回的 JSON 数据

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

解决方法 1:

因为您要添加的内容源自哪里,单击在同一行上,您可能不需要 id 的要添加的内容那里 div。使用链接被单击确定父 tr 使用 .closest() 钻到 div 使用 .find().last()

因为你可能会有多个链接我会推荐使用一类 .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

概念验证--> 与 DOM ready 单击 a.dynamic 链接不通过导航到链接。

官方微信
官方QQ群
31647020