如何在 HTML 网页中解析 json URL 数据答案

【问题标题】：how to parse json URL data in HTML web page如何在 HTML 网页中解析 json URL 数据
【发布时间】：2013-09-20 11:22:31
【问题描述】：

我想将 HTML 网页中的 JSON URL 数据剥离并显示在页面上，我正在使用以下代码。

我想在段落 div 中显示 JSON 数据。

<script>
  function gContent(){
    alert('working');

    $.getJSON('http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?                 organizationCode=att&userId1&', function(data) {
       alert(data);
       $(".paragraph").html(data);
    });
  }
</script>

【问题讨论】：

Ways to circumvent the same-origin policy 的可能重复项
那么你得到了什么错误
我猜，你需要稍微修改一下标题。
我正在调用标题标签的 gContent() 函数 onclick，在 JSON 代码之前，alert() 正在工作，但在 JSON 代码之后，alert() 中没有结果出现，并且想要将数据附加到 .段 div。这是我想附加到 div 中的 JSON 结果链接。
您呼叫的是同一个站点吗？

标签： javascript html json

【解决方案1】：

 Origin null is not allowed by Access-Control-Allow-Origin.

这是由于same origin policy 而尝试从其他网站/域获取数据时通常会收到的消息。为了克服这个问题，我们采用了两种主要方法：

JSONP
CORS

您可以使用 JSONP 轻松获取数据。如果需要，您可以使用 CORS，您需要其他网站在其标题中允许您的网站。

在 JSONP 回调中，应该注意您提供的 url。存在回调值的 url 不应包含除 jsonp 回调函数之外的任何其他元素。即，该页面的第一个元素（即使它最初不应该有任何html标签），应该是你给的jsonp回调函数。

【讨论】：

【解决方案2】：

同样，您尝试使用 jQuery 添加 $.each 以从响应中获取每个 fieldData。

 <script>
      function gContent(){
        alert('working');

        $.getJSON('http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1&', function(data) {
           $.each(data, function(i, fieldData){

            $("p").append(fieldData + " ");  //appending fieldDatas to paragraph tag

          });
        });
      }
    </script>

【讨论】：

【解决方案3】：

您不能使用getJSON 调用另一个域，您必须调用同一个域。您可以通过以下方法之一解决此问题：

如果您可以访问第二个域，则可以添加 Access-Control-Allow-Origin标头
如果您有权访问第二个域，您可以将请求更改为 JSONP 并添加回调
如果您无权访问第二个域，则必须使用后端语言例如PHP，例如创建一个新页面 calling_the_url.php 和你做 file_get_contents('url'); 并且在你的 javascript 你叫你的calling_the_url.php。

【讨论】：

【解决方案4】：

您可以使用JSON.stringify()，将数据作为字符串打印到 DOM。

$(".paragraph").html(JSON.stringify(data));

检查这个http://jsfiddle.net/cc8HX/

【讨论】：

【解决方案5】：

你可以试试这个：

jQuery.parseJSON('{"name":"John"}');

【讨论】：