2013-08-23 41 views
9

我正在開發phoneGap應用程序。當我在瀏覽器中測試我的應用程序時,沒有任何問題。 Everythings運作良好。但是,當我嘗試在漣漪中,我的JavaScript不起作用。 詳細信息:用戶可以登錄系統,如果它成功重定向到另一個頁面(使用jquery mobile),它在Chrome,Internet Explorer和Firefox中運行良好。但是不起作用。 我的代碼如下所示:PhoneGap應用程序無法使用Google紋波

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <title></title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css"> 

    <script src="js/jquery-1.10.2.js"></script> 
    <script src="js/jquery.mobile-1.3.2.js"></script> 
    <script src="js/jquery.base64.js"></script> 
    <script src="js/cordova.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var credentials = 'admin:adminabc'; 
      var authType = "Basic " + credentials; 
      $('#loginForm').submit(function() { 
       $.ajax({ 
        type : "GET", 
        url : 'http://localhost:30673/api/user/Get', 
        data : 'json', 
        beforeSend : function(xhr) { 
         xhr.setRequestHeader("Authorization", authType); 
        }, 
        success : function(data, textStatus) { 
         $.mobile.changePage("#menu", { 
          transition : "slideup" 
         }); 
        } 
       }); 
      }); 

      $("#aboutUs").click(function() { 
       $.ajax({ 
        type : "GET", 
        url : 'http://localhost:30673/api/AboutMeWA/', 
        data : 'json', 
        beforeSend : function(xhr) { 
         xhr.setRequestHeader("Authorization", authType); 
        }, 
        success : function(data, textStatus) { 
         $('#aboutMeTitle').val(data); 
        } 
       }); 
      }); 
     }); 

     function onBodyLoad() { 
      document.addEventListener("deviceready", onDeviceReady, false); 

      function onDeviceReady() { 
       document.addEventListener("pause", onPause, false); 
       document.addEventListener("resume", onResume, false); 
      } 

      function onPause() { 
       alert("paused"); 
      } 

      function onResume() { 
       alert("resume"); 
      } 

     } 
    </script> 
</head> 
<body onload="onBodyLoad()"> 
    <div data-role="page" id="mainPage"> 
     <div data-role="header" data-theme="a" > 
      <h4> Ziro </h4> 
     </div> 
     <div data-role="content"> 
      <form id="loginForm"> 
       <div data-role="fieldcontain"> 
        <label for="textinput1"> Kullanıcı Adı:  </label> 
        <input name="" id="userName" placeholder="username" value="" type="text"> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="textinput2"> Password</label> 
        <input name="" id="password" placeholder="password" value="" type="password"> 
       </div> 
       <input type="submit" data-theme="a" data- icon="arrow-r" data-iconpos="left" 
       value="Login"> 
      </form> 
      <a href="#menu" class="ui-link" data- transition="flip">Menü</a> 
     </div> 
     <div data-role="footer" data-theme="a" data-position="fixed"> 
      <h3> FF Yazılım </h3> 
     </div> 

    </div> 
    <div data-role="page" id="menu" data-add-back-btn="true" data-back-btn-text="Geri"> 
     <div data-role="header" data-theme="a" > 
      <h4> Ziro Mobilya </h4> 
     </div> 
     <div data-role="content"> 
      <ul data-role="listview" data-divider-theme="a" data- inset="true"> 
       <li data-role="list-divider" role="heading"> 
        Panel 
       </li> 
       <li data-theme="c"> 
        <a href="#about" data-transition="flip" id="aboutUs"> Hakkımızda </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page1" data-transition="slide"> Referans Resimleri </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page1" data-transition="slide"> Servis Resimleri </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page1" data-transition="slide"> Slogan </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page1" data-transition="slide"> İstatistikler </a> 
       </li> 
       <li data-theme="c"> 
        <a href="#page1" data-transition="slide"> Button </a> 
       </li> 
      </ul> 
     </div> 
     <div data-role="footer" data-theme="a" data-position="fixed"> 
      <h3> FF Yazılım </h3> 
     </div> 
    </div> 

    <div data-role="page" id="about" data-add-back-btn="true" data-back-btn-text="Geri"> 
     <div data-theme="a" data-role="header"> 
      <h3> Hakkımızda </h3> 
     </div> 
     <div data-role="content"> 
      <div style=""> 
       <img style="width: 288px; height: 100px" src="http://aknera.com/temp/default/images/background3.jpg"> 
      </div> 
      <a data-role="button" data-theme="a" href="#page1" data-icon="arrow-l" 
      data-iconpos="left"> Galeriden Resim Seç </a> 
      <div data-role="fieldcontain"> 
       <label for="textinput2"> Başlık: </label> 
       <input name="" id="aboutMeTitle" placeholder="" value="" type="text" data-mini="true"> 
      </div> 
      <div data-role="fieldcontain"> 
       <label for="textarea2"> Açıklama </label> 
       <textarea name="" id="textarea2" placeholder="" data-mini="true"></textarea>               




      </div> 
      <a data-role="button" data-theme="a" href="#page1" data-icon="alert" data-iconpos="left"> Kaydet </a> 
     </div> 
     <div data-role="footer" data-theme="a" data-position="fixed"> 
      <h3> FF Yazılım </h3> 
     </div> 
    </div> 
</body> 
</html> 

我的應用程序結構如下所示:

enter image description here

錯誤代碼是:xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl = HTTP%3A //本地主機%3A30673/ap我/用戶/獲取%3Fjson rippleapi.herokuapp.com狀態代碼:500內部服務器錯誤我從我的本地主機獲取數據posthost:localhost:30673/api/user/Get';它在瀏覽器中運行良好。從localhost獲取數據:30673/api/user/Get。但在紋波它試圖從那裏得到的數據:xhr_proxy tinyhippos_apikey = ABC & tinyhippos_rurl =的http%3A //本地主機%3A30673/API/U SER/GET%3Fjson rippleapi.herokuapp.com

需要諮詢的傢伙。

+0

您是否在控制檯中看到任何錯誤? –

+0

錯誤代碼是:xhr_proxy tinyhippos_apikey = ABC&tinyhippos_rurl = HTTP%3A //本地主機%3A30673/API /用戶/ GET%3Fjson rippleapi.herokuapp.com 狀態碼:?500 內部服務器錯誤 我'獲取數據從我的本地主機發布地址:http:// localhost:30673/api/user/Get' 它在瀏覽器中運行良好。從http:// localhost:30673/api/user/Get獲取數據。 但紋波它試圖從那裏得到的數據: xhr_proxy tinyhippos_apikey = ABC&tinyhippos_rurl =的http%3A //本地主機%3A30673/API /用戶/ GET%3Fjson rippleapi.herokuapp.com – fuat

回答

24

您可能遇到的問題是您正在使用默認情況下在設置中打開的Ripple的跨域代理。

跨域代理有3個設置:「遠程」,「本地」和「禁用」。 在我的情況下,我實際上必須禁用它,但在某些情況下,您可以使用「本地」。

可能的情景:

1)您的本地應用程序調用遠程服務地方的另一臺服務器上:

你要麼使用「遠程」或「已禁用」根據配置遠程服務器上。

2)您的本地應用程序是在「localhost」,你正在調用另一個本地主機訪問網址:

你要麼使用「本地」或「已禁用」,取決於您的跨域設置和這樣。

3)您正在運行的本地應用程序,調用服務器,這也是當地的,但在虛擬機或東西,使得它無法訪問到代理在「localhost」:你需要把它設置

以「禁用」,並確保您的api服務器具有允許跨域請求的設置。最值得注意的是你會想設置「訪問控制允許來源」標題。

+0

據我所知:(1)方案?人們也可以使用「本地」。使用本地代理是處理跨域Ajax的標準方法 –

2

我有同樣的問題。當我嘗試連接到我在IISExpress上託管的WebAPI服務時發生了這種情況。

當我將託管更改爲我的本地IIS服務器後,該錯誤消失,我可以使用Ripple連接到我的WebAPI服務。當然,你將不得不改變URL指向你的服務(在你的情況下它是http://localhost:30673)。

相關問題