从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>