從WCF服務獲取JSON

Question

我有一個簡單的WCF服務應用程序，其中包含「房間」項目的列表和一些通過WebInvoke以JSON格式檢索信息的方法。該方法「GetRooms（）」在瀏覽器中返回以下測試項目：

[{"RoomId":1,"RoomName":"Big Room"}, 
    {"RoomId":2,"RoomName":"Medium Room"}, 
    {"RoomId":2,"RoomName":"Small Room"}] 

我目前正在使用jQuery的web應用程序檢索JSON，這樣我可以在以後的jqGrid格式化。我試圖通過使用以下代碼來執行此操作：

<div> 
<input type="button" value="Get Rooms" onclick="getRooms();"> 
</div> 
<div id="rooms"> 
<script type="text/javascript" src="lib/js/jquery-1.7.1.js"> 
    function getRooms() { 
     $.ajax({ 
     dataType: 'jsonp', 
     type: "GET", 
     url: "http://localhost:6188/RoomBookingService.svc/GetRooms", 
     success: function (data) { 
      var innerHtml = ""; 
      for (i = 0; i < data.length; i++) { 
       innerHtml += data[i].RoomId + ' ' + data[i].RoomName + '<br/>'; 
      } 
      $("#rooms").html(innerHtml); 
     } 
    }); 
} 
</script> 
</div> 

我收到一個錯誤，指出getRooms未定義。有人能幫忙嗎？

Answer 1

而不是inline點擊處理程序使用jQuery來附加click處理程序。試試這個

<div> 
<script type="text/javascript" src="lib/js/jquery-1.7.1.js"> 
$(function(){ 
    $("input:button").click(function() { 
     $.ajax({ 
      dataType: 'jsonp', 
      type: "GET", 
      url: "http://localhost:6188/RoomBookingService.svc/GetRooms", 
      success: function (data) { 
       var innerHtml = ""; 
       for (i = 0; i < data.length; i++) { 
        innerHtml += data[i].RoomId + ' ' + data[i].RoomName + '<br/>'; 
       } 
       $("#rooms").html(innerHtml); 
      } 
     }); 
    }); 
}); 
</script> 
<input type="button" value="Get Rooms" /> 
</div> 
<div id="rooms"></div>