无法使用javascript从html页面中的url检索JSON数据_Javascript_Jquery_Html_Json

无法使用javascript从html页面中的url检索JSON数据

javascript jquery html json

无法使用javascript从html页面中的url检索JSON数据,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我已经创建了一个示例WCF服务，用于从数据库检索数据，并在浏览器中将其显示为JSON数据。此任务已成功完成 url接收到的JSON数据为： {"shipmentDetails":[{"Name":"AAA","Number":"123"},{"Name":"BBB","Number":"321"}]} 创建上述服务后，我的任务是在单击按钮时在html页面中查看相同的数据。我使用javascript/jQuery从URL接收数据，但当我单击按钮时，没有执行任何操作以下是带有javascript

我已经创建了一个示例WCF服务，用于从数据库检索数据，并在浏览器中将其显示为JSON数据。此任务已成功完成

url接收到的JSON数据为：

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

创建上述服务后，我的任务是在单击按钮时在html页面中查看相同的数据。我使用javascript/jQuery从URL接收数据，但当我单击按钮时，没有执行任何操作

以下是带有javascript的HTML：

<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/arun/arun",
           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>
               $("#test").html(innerHtml);
               alert("JSON DATA");
               alert(obj.shipmentDetails[0].Number);
               },
               error: function (XMLHttpRequest, textStatus, errorThrown) {

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

                }

             });
         });
      });


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


JSON
$（文档）.ready（函数（）{
$（“测试按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
contentType:“应用程序/jsonp；字符集=utf-8”，
url:“http://localhost:4148/EIS.svc/getShipment/arun/arun",
成功：功能（数据）{
obj=评估（'（'+数据+'））；
警报（obj）；
var innerHtml=“”；
document.getElementById（'test'）。innerHTML=obj；
//“test”是的ID
document.getElementById（'testlab'）。innerHTML=obj.shipmentDetails[0]。名称；
//“testlab”是的ID
$（“#test”）.html（innerHtml）；
警报（“JSON数据”）；
警报（obj.shipmentDetails[0]。编号）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（“检索时出错–“+XMLHttpRequest.responseText+”：“+textStatus+”：“+ErrorSprown”）；
}
});
});
});

看看你的url是字符串而不是变量名

 type: 'GET',
url: serviceURL /* instead of 'serviceURL'*/,

这是完整的代码

  $('#testButton').click(function() {
          //'testButton' is ID of button input type in html
    alert("Button clicked");
        var serviceURL="http://localhost:4148/EIS.svc/getShipment/json/data";
     $.ajax({
         type: 'GET',
     url: serviceURL,
     data:$('#serviceURL').serialize(),
     processData: false,
     dataType: 'jsonp',
     contentType: "application/jsonp; charset=utf-8",
     //If the call succeeds
     success:function (data) {
         alert(data);
     },

     //If the call fails

     error: function (XMLHttpRequest, textStatus, errorThrown) {

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

     }

     });
        return false;
     });

要使用从URL返回的JSON数据，必须将其包装在回调函数中，如下所示：

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

包装数据前的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"}]});

然后需要对javascript进行如下更改：

  $('#testButton').click(function() {
          //'testButton' is ID of button input type in html
       $.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);

            }

         });
        return false;
     });

$（“#测试按钮”）。单击（函数（）{
//“testButton”是html中按钮输入类型的ID
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
contentType:“应用程序/jsonp；字符集=utf-8”，
url:“http://localhost:4148/EIS.svc/getShipment/arun/arun?callback=jsonpexp",
jsonpCallback:'jsonpexp'，
成功：功能（数据）{
var innerHtml=“”；
document.getElementById（'test'）。innerHTML=data.shipmentDetails[0]。Name；；
//“test”是的ID
document.getElementById（'testlab'）。innerHTML=data.shipmentDetails[0]。编号；
//“testlab”是的ID
document.getElementById（'test2'）。innerHTML=data.shipmentDetails[1]。Name；；
//“test2”是的ID
document.getElementById（'testlab2'）。innerHTML=data.shipmentDetails[1]。编号；
//“testlab2”是的ID
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（“检索时出错–“+XMLHttpRequest.responseText+”：“+textStatus+”：“+ErrorSprown”）；
}
});
返回false；
});

还是一样。。未执行任何操作。请检查是否调用

jQuery

，以及id为testButton的按钮是否存在且唯一，可能需要粘贴完整的html