0

jQuery Mobile を使用した最初の Web アプリケーションの構築 - これは最終的に PhoneGap で動作する必要があるため、シンプルに保とうとしています。問題は、$.ajax を使用して Web サーバーからリモート コンテンツを読み込もうとしているのですが、応答が得られないことです。

コード (読みやすいように一部省略)

<!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>

基本的には、ハッシュ付きのリンクを渡し、それを取得して、リモート Web サーバーからコンテンツをロードしようとします。これはコンテンツを表示しない部分です。使用している URL が確実に HTML を表示していることを確認できるので、それを取得して挿入できるはずです。

成功イベントのアラートは発生しませんが、アラートを ajax コードのいずれかの側に配置すると、正常に起動するため、真ん中を通過するだけです。

ローカルホストのセットアップで .load() を使用してこのコードで成功しましたが、コンテンツ データをリモートで移動して ajax に切り替えるとすぐに動作しなくなりました。.load() でこれを行う方法はありますか? 応答から div をリクエストするだけでよい方法が気に入りました。

簡単なものがありませんか？サーバーからのコンテンツは、CMS システムからのコンテンツの単純な HTML ページになります。

ありがとう

4

2 に答える 2

2

ソースのコンテンツにアクセスできません。同一起源ポリシーによるものと思われます。サーバー側でそれを行う必要があるか、ソースがクロスドメインアクセスを許可する必要があります。

于 2012-08-14T12:48:26.840 に答える
0

少し調べてみたところ、最新のブラウザーで 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

于 2012-08-14T15:47:15.960 に答える