2012-09-20 73 views
1

我有一個小頁面的網頁。該頁面jQuery AJAX調用返回一個空的響應

​​

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> 

當點擊Load按鈕,它應該運行對一個數據庫查詢,返回結果來填充表單文本框。我正在使用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

和Google Chrome控制檯有什麼關係? –

+0

@SnakeEyes與Firebug相同。空響應。 – Isuru

+0

@ZathrusWriter:75%是可以接受的速度。手段3/4被接受。 – itachi

回答

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()},