jQuery mobile - 試圖用$ .ajax獲得遠程內容

用jQuery Mobile構建我的第一個webapp - 這需要最終與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>

基本上，通過一鏈路與散列，拿起它，並試圖在從遠程網絡服務器來加載內容。這是沒有顯示任何內容的位 - 我可以確認我使用的網址絕對顯示HTML，所以我應該能夠將其提取並注入。

成功事件中的警報不會觸發，但是如果我將警報放在ajax代碼的任一側，它們就會發出警報，因此它只是通過中間。

我已經成功使用本地代碼設置上的.load（），但只要我將內容數據遠程移出並切換到ajax，它就停止工作。有沒有辦法與.load（）做到這一點？我喜歡這樣的方式，只需要請求一個div。

我是否缺少一些簡單的東西？來自服務器的內容只是來自CMS系統的簡單HTML內容頁面。

謝謝

來源

2012-08-14 Dave

我已經做了一些挖掘，發現現在可以在現代瀏覽器中通過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-14 15:47:15 Dave

來源的內容是不可訪問的。似乎是由於same origin policy。您需要在服務器端執行此操作，否則源應允許跨域訪問。

來源

2012-08-14 12:48:26 Rab

我也是移動javascript代碼做了ajax到服務器並從那裏運行它，它是從同一個域請求？ – Dave 2012-08-14 13:05:47

是的，如果你可以...但我的意思是你在自己的服務器端獲得源代碼的內容，並通過相同的ajax – Rab 2012-08-14 13:08:07

好 - 任何機會的例子或指南如何做到這一點，不完全確定你是什麼意思。 – Dave 2012-08-14 13:14:19

jQuery mobile - 試圖用$ .ajax獲得遠程內容

回答

相關問題