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”内）的响应页面。

我尝试过以下方法： $就（）：

           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'标头。因此不允许原点”http://localhost:8080“访问。”

Answer 1

XMLHttpRequest无法加载：...没有'Access-Control-Allow-Origin' 标头出现在请求的资源上。起源因此，“http://localhost:8080”不允许访问。

除了您自己的网站之外，您无法向其他网站发出AJAX请求。这称为Cross-origin resource sharing。

网站A.com无法向网站B.com发出AJAX请求，除非B.com发送以下Access-Control-Allow-Origin标头：

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

解决方案是从B.com发出AJAX请求（将javascript代码放在B.com）或在B.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);
});

Answer 2

您说您的网址正在构建正确，并且您正在使用jQuery，请尝试以下方式：

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

这会请求yourUrl（请务必将此更改为您的变量）并使用请求的响应填充responseContainer div。

查看http://api.jquery.com/jQuery.get/了解详情。

jQuery：获取JSON请求响应并在当前的html页面下显示它

2 个答案: