Question

我有一个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);
        }
    });

但最后，它在网页上显示的内容如下： enter image description here

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

Answer 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); } });

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

Answer 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')
        }
    });

您可以对其进行编辑以匹配您的数据。确保网址正确无误，您可以尝试：

'./json/data.json'

根据https://jsonlint.com/

正确解析您的JSON

所以它必须是URL。

JSON在显示屏上损坏

2 个答案: