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>

从WCF服务获取JSON

1 个答案: