Question

<html>
    <body>
        <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
        <script>
            $(document).ready(function () {
                $.ajax({
                    type: 'GET',
                    async: false,
                    contentType: "application/json",
                    url: "http://www.XXX.XXX.in/api/categories",//url:"dir/categories",
                    dataType: "jsonp", //dataType: "jsonp",
                    success: function (data) {
                        $.each(data, function(i,data) {
                            var det="<div>id :"+data.categoryId+" Name "+ data.categoryName+"</div></br>";
                            $(det).appendTo("#display");

                            //alert(det);
                        });
                        alert(data);
                    },
                    error: function (data) {
                        alert("this is error "+data);
                    }
                });
            });

        </script>

        <div id="display"></div>
    </body>
</html>

在上面的代码中，我试图访问类别json并打印详细信息我这样做有两种方式：

我已将类别文件保存在dir /文件夹中并访问它，以便正确显示结果当我尝试在线访问它时，它给了我一个错误：当我给dataType:"json"而不是jsonp时，我给出了以下错误：

OPTIONS http:// XXX.XXX.in/api/categories 404 (Not Found)
XMLHttpRequest cannot load http:// XXX.XXX.in/api/categories. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// localhost:8080' is therefore not allowed access.

我不知道服务器是否有跨平台ref。加入。

Answer 1

您无法使用JAVASCRIPT从您的域访问其他域的数据。这是一个称为“Same origin Policy”

的安全规则

因此，要获取另一个域的数据，您可以编写服务器端脚本（可能是PHP或您熟悉的其他语言），然后您可以从脚本向服务器发出ajax请求。

浏览器强制实施相同的原始政策，以保护网站不受其他网站的影响，从而制作xhr请求并将其内容显示为自己的内容。

因此，网站A.com无法通过XHR连接到B.com或：
http://A.com无法连接到http://sub.A.com localhost：80无法连接到localhhost：8080

修改

根据您的要求，这是使用PHP脚本的解决方案。

<强> get_json_from_url.php

<?php header("Content-type: text/json"); $response = fopen('http://www.eazydial.logicengine.in/api/categories', "rb"); echo stream_get_contents($response); ?>

HTML页面

<html> <body> <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script> <script> $(document).ready(function () { $.ajax({ type: 'GET', url: "get_json_from_url.php", dataType: "json", success: function (data) { $.each(data, function(i,data) { var det="<div>id :"+data.categoryId+" Name "+ data.categoryName+"</div></br>"; $(det).appendTo("#display"); }); console.log(data); //alert can't print [object] so always use console.log() to inspect object and it values. (see output in browser console) }, error: function (data) { console.log("Err:"); console.log(data); } }); }); </script> <div id="display"></div> </body> </html>

此处提供的PHP脚本解决方案仅适用于GET请求方法。如果您想对任何API使用POST请求，请查找cURL library以从api获取数据。

无法从url解析json

1 个答案: