Question

使用jQuery Mobile构建我的第一个webapp - 这需要最终使用PhoneGap，所以我试图保持简单。问题是我正在尝试使用$ .ajax从网络服务器加载远程内容，但我没有收到回复。

代码（为了便于阅读而略微截断）

<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no,target-densitydpi=device-dpi;" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>     
<link rel="stylesheet" href="scripts/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="themes/apptheme.min.css" />
<link rel="stylesheet" href="styles/mobilestyle.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/mobilesitetyle.css" type="text/css" media="screen" />
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js"></script>
<script src="scripts/jquery.url.js"></script>

<script type="text/javascript">
    $(document).bind("pagebeforechange", function (e, data) {
        // We only want to handle changePage() calls where the caller is
        // asking us to load a page by URL.

        if (typeof data.toPage === "string") {
            // We are being asked to load a page by URL, but we only
            // want to handle URLs that request the data for a specific
            // category.

            var u = $.mobile.path.parseUrl(data.toPage);

            var re = /^#productList/;
            if (u.hash.search(re) !== -1) {
                $.ajax({
                    url: "http://myproductwebsite/products.aspx",
                    datatype: "html",
                    success: function (data) {
                        $('.submenu').html(data);
                        alert('Load was performed.');
                    }
                });
            }

        }
    });

</script>
</head>
<body>
<div style="width:100%;font-size:13px;" data-role="page" id="home">
    <div data-role="header" data-position="fixed">          
        <h1>Home</h1>            
    </div>
    <div data-role="content" class="submenu">
        <a href="#productList" data-transition="slide"><img src="images/Icon-Products.png" alt="products" /></a>                
    </div>
    <div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"></div>
</div>

<div data-role="page" data-theme="a" id="productList" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">          
        <h1>Products</h1>            
    </div><!-- /header -->
    <div data-role="content" class="submenu">product content    
        <!-- content gets put in here -->
    </div><!-- /content -->
    <div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"></div>
</div><!-- /page -->
</body>
</html>

基本上，传递带有哈希的链接，将其拾起并尝试从远程网络服务器加载内容。这是没有显示任何内容的位 - 我可以确认我正在使用的网址肯定会显示HTML，所以我应该能够拿起并注入它。

成功事件中的警报不会触发，但如果我在ajax代码的任何一侧放置警报，则它们会正常触发，所以它只是通过中间。

我在本地主机设置上使用.load（）获得了此代码的成功，但是一旦我将内容数据远程移出并切换到ajax，它就停止了工作。有没有办法用.load（）做到这一点？我喜欢你可以用响应方式请求div的方式。

我错过了一些简单的东西吗？来自服务器的内容只是来自CMS系统的简单HTML内容页面。

由于

Answer 1

源的内容无法访问。似乎是由于 same origin policy 。您需要在服务器端执行此操作，或者源应允许跨域访问。

Answer 2

我已经做了一些挖掘，发现现在可以在现代浏览器中通过ajax允许跨域脚本编写。我已将以下代码添加到我的index.html中，如上面的初始问题所示：

$(document).bind("mobileinit", function () {
        $.mobile.allowCrossDomainPages = true;
        $.support.cors = true;
    });

这会启用对请求的支持。在服务器端，您需要返回从该侧启用它的标头，这意味着如果需要（.Net示例），您可以将其锁定到单个页面：

Response.AppendHeader("Access-Control-Allow-Origin", "*");

我现在可以使用localhost中的应用程序并从远程服务器中提取内容。它也适用于手机。将不得不使用PhoneGap进行测试，但从我所看到的内容确实支持它。

此答案的资源：

https://forum.jquery.com/topic/cross-domain-requests-with-support-cors-and-mobile-allowcrossdomainpages

http://enable-cors.org/#how-php

jQuery mobile - 尝试使用$ .ajax获取远程内容

2 个答案: