gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 22:57:50 25 4
gpt4 key购买 nike

我有一个链接可以将查询字符串发送到一个 PHP 文件,该文件以 JSON 格式从 Mysql 服务器返回数据。我想将此 JSON 数据放入一个 DIV 中,该 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>

最佳答案

由于您要将内容添加到产生点击的同一行,因此您可能不需要 id的 div 以便在那里添加内容。使用单击的链接确定父级 tr使用 .closest()使用 .find() 向下钻取到 div和 .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 .

Concept verification --> 用 DOM ready点击 a.dynamic链接不会导航到该链接。

关于php - 异步将数据放入动态生成的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25473911/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com