使用JavaScript显示JSONP Web服务中的数据

Question

I'm trying to retrieve data from the itis.gov web service and display on an html page. 我正在尝试从itis.gov Web服务检索数据并显示在html页面上。

The site has JSON and JSONP web services . 该站点具有JSON和JSONP Web服务。 I cannot figure out why my code below is not working, I've got the code to work with other JSON web service APIs such as the facebook API. 我无法弄清楚为什么我的以下代码无法正常工作，我已将代码与其他JSON Web服务API（例如facebook API）一起使用。

Here is an example JSON API call using the webservice method "getScientificNameFromTSN" 这是使用网络服务方法“ getScientificNameFromTSN”的示例JSON API调用

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function() {
   var url="http://www.itis.gov/ITISWebService/jsonservice/getScientificNameFromTSN?";
   $.getJSON(url, { "tsn" : "202384" }, function(data) {
      document.write(data.author);
   });
});
</script>
</head>
<body>
</body>
</html>

Answer 1

The documentation page that you link to contains this text: 您链接到的文档页面包含以下文本：

JSON-P calls are made are made by appending "jsonp=function_name" to the argument list for your web service call. 通过将“ jsonp = function_name”附加到Web服务调用的参数列表中来进行JSON-P调用。

For this to work with jQuery you'd need to add jsonp=? 为了jsonp=?与jQuery一起使用，您需要添加jsonp=? to the query string of your URL. URL的查询字符串。 For example: 例如：

$(document).ready(function() {
    var url="http://www.itis.gov/ITISWebService/jsonservice/getScientificNameFromTSN?jsonp=?";
    $.getJSON(url, { "tsn" : "202384" }, function(data) {
        document.write(data.author);
    });
});

jQuery will then replace the ? 然后jQuery将替换? with the name of its automatically generated function. 其自动生成的功能的名称。

Answer 2

To support real ajax requests your server should answer with Access-Control-Allow-Origin: * header, but it does not. 为了支持真正的ajax请求，您的服务器应使用Access-Control-Allow-Origin: *标头进行回答，但事实并非如此。

Alternatively you can use $.ajax ; 或者，您可以使用$.ajax ; it looks more clear and handy for me 对我来说看起来更清晰方便

$.ajax({
    url     : "http://www.itis.gov/ITISWebService/jsonservice/getScientificNameFromTSN",
    data    : { "tsn" : "202384" },
    dataType: "jsonp",
    jsonp   : "jsonp",
    success : function(data) { console.info(data); } 
});

Note that you should pass dataType to say jquery you query data cross-domain with padding and also you should provide query string parameter with callback name, as your server required ( jsonp : "jsonp" ). 请注意，您应该传递dataType来表示jquery，并使用padding查询跨域数据，并且还应根据服务器的要求提供带有回调名称的查询字符串参数（ jsonp : "jsonp" ）。

Result is 结果是

author: "Merriam, 1914"
class: "gov.usgs.itis.itis_service.data.SvcScientificName"
combinedName: "Ursus arctos nelsoni"
kingdom: "Animalia"
tsn: "202384"
unitInd1: null
unitInd2: null
unitInd3: null
unitInd4: null
unitName1: "Ursus"
unitName2: "arctos"
unitName3: "nelsoni"
unitName4: null

使用JavaScript显示JSONP Web服务中的数据

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-04-11 08:30:11

解决方案2
0 2013-04-11 08:39:20

使用JavaScript显示JSONP Web服务中的数据

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-04-11 08:30:11

解决方案2 0 2013-04-11 08:39:20

解决方案1
1 已采纳 2013-04-11 08:30:11

解决方案2
0 2013-04-11 08:39:20