jQuery AJAX调用返回一个空响应

时间:2012-09-20 12:20:16

标签: php html jquery

我有一个包含小表格的网页。

enter image description here

页面的HTML代码。

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body id="body_services">

<?php

include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();

//loading taxi service names for updating combobox
$queryLoadSids = $db->prepare("SELECT * FROM taxi_services ORDER BY SID");
$queryLoadSids->execute();
$dropdown = "<select name='serviceID'>";
while ($row = $queryLoadSids->fetch(PDO::FETCH_ASSOC))
{
    $dropdown .= "\r\n<option value='{$row['SID']}'>{$row['Name']}</option>";
}
$dropdown .= "\r\n</select>";

?>

<div id="tasks">
    <ul>
        <li><a id="add" href="#">Add a new taxi service</a></li>
        <li><a id="update" href="#">Update a taxi service</a></li>
        <li><a id="delete" href="#">Delete a taxi service</a></li>
        <li><a id="view" href="#">View taxi services</a></li>
    </ul>
</div>

<form id="cmbServiceIDs" name="sids">
<table width="380" border="0">
  <tr>
    <td><label for="serviceId">Select the Service ID</label></td>
    <td><?php echo $dropdown; ?></td>
    <td><input id="load" type="submit" value="Load" name="btnload" /></td>
  </tr>
</table>
</form>

<form id="frmUpdateService" name="Update" action="" method="post">
<table width="300" border="0">
  <tr>
    <td><label for="sid">Service ID</label></td>
    <td><input type="text" name="sid" value="" style="text-align:right" /></td>
  </tr>
  <tr>
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" value="" /></td>
  </tr>
  <tr>
    <td><label for="cost">Cost</label></td>
    <td><input type="text" name="cost" value="" /></td>
  </tr>
  <tr>
    <td><label for="active">Active</label></td>
    <td><input type="checkbox" name="active" value="" /></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
  </tr>
</table>
</form>

</body>
</html>

单击“加载”按钮时,它应该对数据库运行查询,返回结果以填充表单中的文本框。我正在使用jQuery AJAX来完成这项任务。

$(function()
{
    $("#frmUpdateService").hide();
    $("#cmbServiceIDs").hide();

    $("#update").click(function()
    {
        $("#cmbServiceIDs").slideDown("slow");
        $("#frmUpdateService").hide();
    });

    $("#cmbServiceIDs").submit(function(e)
    {
        $("#frmUpdateService").fadeIn("slow");
        e.preventDefault();

        $.ajax(
        {
            type        : 'GET',
            url         : 'request.php',
            data        : {'serviceID' : $("#serviceID").val()},
            dataType    : 'json',
            success     : function(response)
            {
                var loadedSID = response[0];
                var loadedName = response[1];
                var loadedCost = response[2];
                var loadedActive = response[3];

                $("#sid").append(loadedSID);
                $("#name").append(loadedName);
                $("#cost").append(loadedCost);
                $("#active").append(loadedActive);
            }
        });
    });
});

这是 request.php 页面。

<?php

include_once 'DatabaseHandler.php';
$db = DatabaseHandler::getInstance();

$param = $_GET['serviceID'];

$queryLoadToUpdate = $db->prepare("SELECT * FROM taxi_services WHERE SID = :serviceID");
$queryLoadToUpdate->bindParam(':serviceID', $param, PDO::PARAM_STR);
$queryLoadToUpdate->execute();
$results = $queryLoadToUpdate->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($results);

?>

但是当我运行页面并单击“加载”按钮时,文本框中没有任何内容。我使用Firebug查看了响应,它显示了一个空响应。我也检查了SQL查询。那里也没有错误。

我不知道我应该检查或做什么。任何人都可以提出任何建议,为什么它在这里不能正常工作?

谢谢。

1 个答案:

答案 0 :(得分:1)

显然查询正常工作,因为我为变量$param提供的值为NULL。我可以用var_dump来解决这个问题。进一步检查让我注意到下拉列表的选定值未正确传递,因为我没有在此行中指定id

$dropdown = "<select name='serviceID'>"; 

我这样纠正了。

$dropdown = "<select id='serviceID' name='serviceID'>";

在jQuery代码中,更改了这一行

data : {'serviceID' : $("#serviceID option:selected").val()},

以获取所选下拉项的值。

data : {'serviceID' : $("#serviceID option:selected").val()},