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

【问题标题】：jQuery mobile - trying to get remote content with $.ajaxjQuery mobile - 尝试使用 $.ajax 获取远程内容
【发布时间】：2012-08-10 18:08:01
【问题描述】：

使用 jQuery Mobile 构建我的第一个 web 应用程序 - 这最终需要与 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>

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

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

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

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

谢谢

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

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

【讨论】：

那么我是否将执行 ajax 的 javascript 代码移动到服务器上并从那里运行它以便从同一个域请求？
是的，如果可以的话......但我的意思是你在自己的服务器端获取源的内容，并通过相同的 ajax 获取它
好的 - 任何关于如何做的例子或指南的机会，不完全确定你的意思。
查看此内容以获取内容stackoverflow.com/questions/599275/…
谢谢，我现在就去看看。

【解决方案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

【讨论】：