Question

我是使用jQuery编程的新手。我花了很长时间试图继续前进，我已经设法完成了一些。但是我真的碰壁了，似乎无法从任何地方找到帮助。

情境：

我正在使用一个选择框来存储不同的音乐类型，我已经通过PHP / MySQL检索过。

    <?php
include 'connectingDB.php';
$catSQL = "SELECT * FROM category ORDER BY catDesc";
$queryresult = mysql_query($catSQL)
or die (mysql_error());
echo "<select id= \"catID\">";
while ($row = mysql_fetch_assoc($queryresult)) {
    $catID = $row['catID'];
    $catDesc = $row['catDesc'];


    echo "<option value = \"$catID\">$catDesc</option>\n";

}
echo "</select>";
mysql_free_result($queryresult);
mysql_close($conn);
?>

当我点击某个类型时，我希望以JSON格式检索所有相关的CD和CD信息，并使用AJAX动态显示在表格中（在同一页面上的选择框下方）

<?php
header('Content-type: application/json');
include 'connectingDB.php';
$category = $_REQUEST['catname'];
$sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice`
        FROM `tiptop_cd`
        INNER JOIN tiptop_category
        ON tiptop_cd.catID=tiptop_category.catID
        WHERE catDesc = '{$category}'";
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_array($result);
while($row = mysqli_fetch_array($result)){
    $returned[] = $row;
}
echo json_encode($returned);

＆GT;

以上所有代码都可以自行运行。但我希望将它们连接在一起。我认为它需要通过jQuery中的onchange事件？

我点击了一个类别后弹出了alert，但这就是我能得到的......

$(document).ready(function(){
$("#catID").change(function(){
alert("The text has been changed.");
});
});

是否需要处于foreach循环中？或foreach内的foreach？

总结一下，我试图了解如何：在带有ajax的动态表格中显示与当前所选特定类别相关的cds和cd信息

非常感谢任何帮助。

Answer 1

希望这可以让你开始

$(document).ready(function () {
    $("#catID").change(function () {
        $.post("index.php?catname=" + $(this).val(), function (data) {
            var table = $('<table></table>'); //create table
            $.each(data, function (index, value) { //loop through array
                var row = $('<tr></tr>'); //create row
                var cell1 = $("<td></td>").val(value.CDID); //create cell append value
                //etc
                row.append(cell1); //append cell to row
                table.append(row); //append row to table
            });
            $('#div').append(table); //append table to your dom wherever you want
        });
    });
});

Answer 2

您可能希望将AJAX用于此目的。 Ajax允许您将用户的选择（即下拉选择）发送到后端PHP文件。

PHP文件将处理接收的数据（即用户的选择）并根据该信息执行数据库查找。它将从db中获取结果并构造（在变量中）表所需的HTML，然后echo返回该变量的内容 - 这将在AJAX过程中收到{{1} {{ 1}}（或success:使用promise语法）函数。

INSIDE 成功/完成功能，您可以使用收到的数据。例如，您可以使用jQuery .done()方法将指定DIV的内容替换为您收到的HTML。

我的方法在以下方面与其他提议的解决方案不同：

我更喜欢使用完整的.html()语法，因为它允许更大的结构，这使得它首先更容易理解/操作。请注意，$.ajax()，.post()和.get()都是.load()的快捷形式，它们会做出某些假设以简化流程。我建议先学习$.ajax()格式，然后再使用其他格式。我自己完成了gazillions的ajax阻止，我大部分时间都继续使用$.ajax()。也许这是一种偏好，但我觉得使用/阅读/评论更容易 - 而且它还允许其他参数不被其他人使用，这使得它更灵活和有用**。
必须使用第二个.PHP文件充当您的ajax处理器。您不能使用包含AJAX代码块的相同.PHP文件。 See this answer
构建HTML表的地方在PHP（处理器文件）中。如上所述，在变量中构造它，然后在最后输出变量：

$.ajax()注意变量是如何在while循环中构造的，并且只在结尾处进行了ECHOed。

$r

以下是一些应该有用的示例：

Simple explanation of AJAX
Example with MySQL lookup in PHP Processor file

** $aContact_info = mysql_query("SELECT * FROM `contacts`"); $r = '<table>'; while ($rrow = mysql_fetch_array($aContact_info)) { $r .= '<tr> <td> Name:<br/> <input type="text" id="first_name" name="first_name" value="'.$rrow['first_name'].'"> <input type="text" id="last_name" name="last_name" value="'.$rrow['last_name'].'"> </td> <td> Email:<br/> <input type="text" id="email" name="email" value="'.$rrow['email1'].'"> </td> <td> Cell Phone:<br/> <input type="text" id="cell_phone" name="cell_phone" value="'.$rrow['cell_phone'].'"> </td> </tr> '; } $r .= '</table>'; echo $r;与.get()和.post()之间的差异：

GET vs POST in AJAX calls
Kevin Chisholm
Sychronous AJAX

Answer 3

另一个（更快）方法是将html表作为字符串返回并将其注入DOM。在PHP处理程序中生成表，然后执行$（'＃div'）。load（'/ index.php？catname = catname'）;或者做$ .get就像下面那样

$(document).ready(function () {
    $("#catID").change(function () {
        $.get({               
            url: 'index.php',
            data: { catname: $(this).val() }
            dataType: 'html',
            success: function (html) {
               $('#div').html(html);
            },
            error: function (xhr, err) { displayErrorMessage("Error: \n\nreadyState: " + xhr.readyState + "\nstatus: " + xhr.status + "\nresponseText: " + xhr.responseText, 'nosave'); }
        });
    });
 });

检索JSON数据并使用AJAX在表中显示

3 个答案: