使用JavaScript显示来自JSONP web服务的数据

Use JavaScript to display data from JSONP web service

本文关键字：web 服务 数据 JSONP JavaScript 显示 使用      更新时间：2023-09-26

我试图从iis .gov web服务检索数据并在html页面上显示。

网站有JSON和JSONP web服务。我不知道为什么我下面的代码不工作，我有代码与其他JSON web服务API，如facebook的API工作。

下面是一个使用webservice方法"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>

您链接到的文档页面包含此文本:

JSON-P调用是通过将"jsonp=function_name"附加到web服务调用的参数列表中来实现的。

要使用jQuery，您需要将jsonp=?添加到URL的查询字符串中。例如:

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

jQuery将用它自动生成的函数名替换?。

为了支持真正的ajax请求，您的服务器应该回答Access-Control-Allow-Origin: *标头，但它没有。

也可以使用$.ajax;对我来说，它看起来更清晰，更方便。

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

注意，你应该传递dataType说jquery你查询数据跨域填充，你也应该提供查询字符串参数与回调名称，作为你的服务器要求(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
相关文章：