Question

我正在开展一个预留教室的项目。预订房间的一种方法是选择一个房间，看它所拥有的东西（座位数，电脑数量等）是否足以满足人们的需求，然后进行预订。

我有一个页面，将所有可用的房间显示为HTML表格中的链接，在PHP / MySQL中动态创建。我的目标是当用户点击房间名称时，AJAX请求执行查询并返回必要的数据，然后将其显示在同一页面上的DIV中。

现在，我正在调用外部PHP文件，该文件获取单击的房间的ID并执行查询。我仍然是jQuery的新手，我很确定问题出在我的jQuery脚本中：

<script type="text/javascript">
$(document).ready(function()
{
$('table.roomNums td a.rm-details').click(function()
{
    var id = $(this).attr('id');

    $.ajax(
    {
        type: 'POST',
        url: 'roomInfo.php',
        data: {
            roomID: id
        },
        dataType: 'json',
        cache: false,

        success: function(result)
        {
            $('#room-details').empty();
            $('#room-details').append("<ul>\n\t<li>Seats: " + result.numOfSeats + "</li>\n</ul>");
        }
    });
});
});
</script>

截至目前，当我点击其中一个房间号码链接时，没有任何反应。我假设我的问题存在于这个脚本中，但我不确定在哪里或什么。我一直在阅读jQuery中的ajax函数，我很确定我理解发生了什么，但我现在没有运气。

Answer 1

您想要解决以下四件事：

HTTP请求浏览器是否会发出ajax请求？如果是这样，它是否包含您试图使其包含的表单参数？
HTTP响应您的php脚本是否以JSON格式返回您期望的数据，以便JQuery可以自动为您解析它？将来自服务器的响应复制并粘贴到测试javascript文件中，看看它是否在javascript调试器中编译为有效的JSON对象。
AJAX成功功能您的javascript错误了吗？你能在像firebug这样的javascript调试器中逐步执行每一行吗？
点击事件处理程序您的点击处理程序是否正确返回false，因此页面不会重新加载？单击事件处理程序功能是否会在单击时触发？

上述四件事中的某个地方就是你的问题。它看起来像你只需要在你的点击处理程序中返回false，这样页面就不会重新加载。

使用jQuery / AJAX从MySQL数据库返回结果并插入到DIV中

1 个答案: