JSON 在显示时损坏答案

【问题标题】：JSON Broken on DisplayJSON 在显示时损坏
【发布时间】：2015-06-26 17:00:19
【问题描述】：

我有一个 JSON 文件，由供应商提供

{"html": "\n<link href=\"//apply.fundingoptions.com/static/msmclone/css/oembed-v3.css\" rel=\"stylesheet\">\n<script type=\"text/javascript\">\n    var __raconfig = __raconfig || {};\n    __raconfig.uid = '53302e56328ff';\n    __raconfig.action = 'track';\n    (function () {\n    var ra = document.createElement('script');\n    ra.type = 'text/javascript';\n    ra.src = ('https:'==document.location.protocol?'https://':'http://')\n    +'www.ruleranalytics.com/lib/1.0/ra-bootstrap.min.js';\n    var s = document.getElementsByTagName('script')[0];\n    s.parentNode.insertBefore(ra, s);\n    }());\n</script>\n\n<div id=\"oembed-widget-container\" class=\"oembed-widget-container\">\n  <div class=\"callout\">Initialising Finance Finder...</div>\n</div>\n<script type=\"text/javascript\">\n    \n        var widget_affiliate_id = 10;\n    \n    \n        var widget_continue_url = \"//apply.fundingoptions.com/continue/\";\n    \n    \n        var widget_submission_url = \"//apply.fundingoptions.com/oembed/submit/\";\n    \n    \n        var widget_match_url = \"//apply.fundingoptions.com/match/\";\n    \n    \n        var widget_title = \"Your funding options\";\n    \n</script>\n<script src=\"//apply.fundingoptions.com/static/oembed/oembed-v4.js\"></script>\n\n",
    "title": "Funding Options Finance Finder",
    "version": 0,
    "type": "rich",
    "width": 500,
    "height": 400
    }

我正在使用这种方法在网页上解析它

 $.ajax({
        type: 'GET',
        url: 'json/data.json',
    data: { get_param: 'value' },   
    dataType:'json',
        success: function (data) {
            var names = data
            $('#summary').html(data.html);
        }
    });

但最后，它会在网页上显示类似的内容：

因为我是第一次实现它，我不确定它是我的坏或 json 是否损坏或其他什么。

【问题讨论】：

标签： ajax json api

【解决方案1】：

看起来这是一个跨域资源共享问题。

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

检查您的浏览器控制台并查看您在尝试加载页面时遇到的错误。它应该说类似于：

XMLHttpRequest cannot load http://apply.fundingoptions.com/match/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

因为您请求的数据与您被拒绝访问的服务器不在同一台服务器上。

在 oembed-v4.js 库中发出以下请求时，似乎发生了错误：

jQuery.ajax({ url: that.match_url, type: 'POST', data: postData, success: function(data, textStatus, jqXHR) { that.data = data; if (data['next_question'] == null) { that.showActions(); that.$spinnerElement.removeClass('fa-cog'); that.$spinnerElement.addClass('fa-check'); } else { that.drawQuestion(); } }, error: function(jqXHR, textStatus, errorThrown) { that.displayError(); }, complete: function() { that.toggleSpinner(false); } });

供应商可能需要在您的域中启用跨域资源共享。

【讨论】：

嗨，我对此表示怀疑，因为 JSON 似乎是在本地托管的。

【解决方案2】：

这是一个 jQuery Ajax 调用的工作示例：

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    dataType:'json',
        success: function (resp) {
            console.log(resp)
            var names = resp.title
            $('#summary').html(names);
        },
       error: function (resp) {
            console.log('error')
        }
    });

您可以对其进行编辑以匹配您的数据。确保url正确，可以试试：

'./json/data.json'

你的 JSON 被正确解析了：https://jsonlint.com/

所以一定是网址。

【讨论】：