如何将返回的 json 数据包装在回调函数中并在 HTML 页面中查看？答案

【问题标题】：How to wrap returned json data within a callback function and view it in the HTML page?如何将返回的 json 数据包装在回调函数中并在 HTML 页面中查看？
【发布时间】：2014-05-30 19:33:11
【问题描述】：

我创建了一个 WCF 服务，它返回可以在浏览器中查看的 json 数据。服务返回并在浏览器中查看的数据为：

{"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]}

现在我的目标是将上面返回的数据包装在回调函数中，如下所示，以便将数据用作 JSONP：

myCallback({"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]})

我实现的接口是：

  [ServiceContract]
         public interface IEIS
        {

            [OperationContract(Name = "getShipment")]
            [WebGet(ResponseFormat = WebMessageFormat.Json,
                       UriTemplate = "getShipment/{UserName}/{Password}")]
            Shipment getShipment(string UserName, string Password);

           [DataContract(Name = "Shipment")]
           [AspNetCompatibilityRequirements(RequirementsMode =  AspNetCompatibilityRequirementsMode.Allowed)]
           public class Shipment
           {
            [DataMember(Order = 0)]
            public shipmentDetails[] shipmentDetails { get; set; }
           }

          [DataContract(Name = "shipmentDetails")]
          [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
          public class shipmentDetails
          {
           [DataMember(Order = 0)]
           public string Name { get; set; }

           [DataMember(Order = 1)]
           public string Number { get; set; }
          }
        }

实际数据是从 MySQL 数据库中获取的。

我的最终目标是在 html 页面中显示 json 数据，为此我使用以下 html，但我没有成功。所以现在我正在加紧将返回的 json 数据包装在 JSONP 的回调函数中。

<html>
<head>
<title>JSON</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
</script>

 <script language="javascript" type="text/javascript">
 $(document).ready(function(){
     $("testButton").click(function() {
        $.ajax({
           type: "GET",
           dataType: 'jsonp',
           contentType: "application/jsonp; charset=utf-8",
           url: "http://localhost:4148/EIS.svc/getShipment/json/data",
           success: function (data) {
               obj = eval('(' + data + ')');
               alert(obj);
               var innerHtml = "";
               document.getElementById('test').innerHTML=obj;
                      //'test' is ID of <label1>
                document.getElementById('testlab').innerHTML=obj.shipmentDetails[0].Name;
                     //'testlab' is ID of <label2>
               alert("JSON DATA");
               alert(obj.shipmentDetails[0].Number);
               },
               error: function (data) {

                    console.error(data);                
                },
                complete: function(data) { 
                    console.info(data);
                }

             });
         });
      });


</script>

</head>
<body>
<input type="button" id="testButton" value="GET JSON"/>
<label id="test"></label>
<label id="testlab"></label>
</body>
</html>

我是这个任务的新手，请帮助我并给出一个有价值的想法，将数据包装在回调函数中并在 HTML 页面中检索数据。

提前致谢。

【问题讨论】：

我找到了如何将返回的数据包装在回调函数中..

标签： jquery json wcf callback jsonp

【解决方案1】：

要将返回的数据包装在回调函数中，需要对url进行更改。

包装数据前的网址是：

[http://localhost:4148/EIS.svc/getShipment/json/data]

在回调函数中包装数据后的 URL 是：

[http://localhost:4148/EIS.svc/getShipment/json/data?callback=jsonpexp]

对URL进行上述修改后，返回的数据如下：

jsonpexp({"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]});

在 HTML 页面中使用返回的 json 数据：

在 javascript 中进行以下更改

function getShipment() {
           $.ajax({
           type: "GET",
           dataType: 'jsonp',
           contentType: "application/jsonp; charset=utf-8",
           url: "http://localhost:4148/EIS.svc/getShipment/arun/arun?callback=jsonpexp",
           jsonpCallback: 'jsonpexp',
           success: function (data) {

               var innerHtml = "";
               document.getElementById('test').innerHTML=data.shipmentDetails[0].Name;;
                      //'test' is ID of <label1>
               document.getElementById('testlab').innerHTML=data.shipmentDetails[0].Number;
                     //'testlab' is ID of <label2>
               document.getElementById('test2').innerHTML=data.shipmentDetails[1].Name;;
               //'test2' is ID of <label3>
                 document.getElementById('testlab2').innerHTML=data.shipmentDetails[1].Number;
              //'testlab2' is ID of <label4>           
               },
               error: function (XMLHttpRequest, textStatus, errorThrown) {

                alert("Error while retrieval – " + XMLHttpRequest.responseText+":"+textStatus+":"+errorThrown);

                }

             });
         }

【讨论】：