javascript - jQuery:获取 JSON 请求响应并将其显示在当前 html 页面下

Question

我正在实现这样的事情:

远程服务器上有一个基于 JSON 的 Web 服务。只需放置特殊结构的 URL 即可调用其方法，如下所示:

http://root-url/ws/service-name?request={json-string}

{json-string}部分包含调用方法的参数，响应将显示在浏览器中。

我想做的是:在html页面上实现一个表单，当用户填写信息并提交时，响应将像表单下方的嵌入页面一样显示。我尝试使用 <object>标签并报告错误:无法解析 json 请求。我可以用 jQuery/javascript 做到这一点吗？

提前致谢。

编辑:我的页面的基本结构:

<form>
 ...
</form>

<div id="responseContainer">

</div>

我有 jQuery 代码，它生成一个有效的 URL(存储在 JavaScript 变量中)字符串，其中包含表单中的数据作为参数。我想要做的是使用 URL 加载当前 html 页面(在“responseContainer”内)中的响应页面。

我尝试过以下方法:$.ajax():

           jQuery.ajax({
                      url: link //where the url is stored
                    }).done(function( data ) {
                        if ( console && console.log ) {
                     console.log( "Sample of data:", data.slice( 0, 100 ) );
                        }
                        jQuery('#responseContainer').html(data);
                    });

和 $.get():

$.get(link, function(data) {
                    $('#responseContainer').html(data);
                });

但是都不起作用，都在控制台中报告了相同的错误:

“XMLHttpRequest 无法加载:...请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin“http://localhost:8080”。”

Answer 1

XMLHttpRequest cannot load: ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

您不能向除您自己的网站之外的其他网站发出 AJAX 请求。这称为Cross-origin resource sharing .

站点 A.com 无法向站点 B.com 发出 AJAX 请求，除非 B.com 发送以下访问控制-允许来源 header :

Access-Control-Allow-Origin: http://www.A.com

解决方案是从 B.com 发出 AJAX 请求(将 javascript 代码放在 B.com)或在 B.com 添加 header 。 com。您还可以使用JSONP .

如果您想从 reddit.com 获取信息，您可以创建一个用于获取 reddit 的 PHP 脚本，然后向该 PHP 脚本发出 AJAX 请求。

// getWebsite.php
<?php echo file_get_contents("http://reddit.com"); ?>

然后使用 AJAX:

$.get('getWebsite.php', function(data) {
   $('#responseContainer').html(data);
});