jQuery 移动应用程序 ajax 调用给出错误答案

【问题标题】：jQuery mobile apps ajax call giving errorjQuery 移动应用程序 ajax 调用给出错误
【发布时间】：2013-03-02 10:22:13
【问题描述】：

我正在使用 phonegap android 开发一个应用程序。当我运行这段代码时，它给出了以下错误

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <title>Insert title here</title>

        <script>
            (function($) {

                $.fn.getPageData = function() {
                    var finalData = "";

                    $.ajax({
                        url : "Demo url.com",
                        type : "GET",
                        success : function(data) {

                            finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>';

                        },
                        fail : function() {
                            finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">Error Page</h3></div></div>';

                        }
                    });
                    this.append(finalData);

                };

            })(jQuery);
            $(document).ready(function() {

                $('body').getPageData();
                //$(a).appendTo("body");
            });
        </script>

    </head>
    <body>

    </body>
</html>

出现以下错误。

Origin null is not allowed by Access-Control-Allow-Origin.

【问题讨论】：

您可以检查：stackoverflow.com/questions/3595515/…，因为这是一个重复的问题。此外，请注意 $(document).ready() 函数不应在 jQuery Mobile 中使用。原因是 Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。 jQuery Mobile 建议绑定到 pageinit 事件：api.jquerymobile.com/pageinit
@TolisEmmanouilidis 非常感谢

标签： jquery ajax cordova jquery-mobile mobile

【解决方案1】：

如果您进行 Ajax 调用，则首先将 OPTIONS 调用发送到服务器，以检测它是否允许跨域资源共享。如果返回的标头不允许这样做，则会出现这样的错误。

您可以尝试使用本地主机（或服务器本身）作为您的演示网址吗？

检查您的网络标签。

您可以在以下位置阅读有关 CORS 的更多信息： http://en.wikipedia.org/wiki/Cross-origin_resource_sharing http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

关于同源政策，请访问： http://en.wikipedia.org/wiki/Same_origin_policy

【讨论】：

【解决方案2】：

尝试将http://localhost（或任何您的本地主机URL）添加到“外部主机”下的phonegap.plist 文件中。它可能会存在于您的支持文件目录中。

【讨论】：