發送和接收JSON數據| PhoneGap的+ jQuery Mobile的使用應用AJAX（）

我正在開發使用jQuery移動1.3.1 & jQuery JavaScript庫v1.9.1的一個PhoneGap的應用程序。我有一個用戶名和密碼的登錄表單。有一個JSON API可以發送和接收JSON數據來處理登錄。發送和接收JSON數據| PhoneGap的+ jQuery Mobile的使用應用AJAX（）

我用下面的JavaScript的Ajax登陸。

$('#submit').bind('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type  : "POST", 
     url  : "http://domainx/public/login", 
     xhrFields : {withCredentials: true}, 
     crossDomain: true, 
     beforeSend : function() {$.mobile.showPageLoadingMsg();}, 
     complete : function() {$.mobile.hidePageLoadingMsg();}, 
     data  : {username : 'subin', password : 'passwordx'}, 
     dataType : 'json', 
     success : function(response) { 
      console.error(JSON.stringify(response)); 
     }, 
     error  : function() { 
      console.error("error"); 
     } 
    }); 
});

這是我的登錄表單的html代碼。

<div data-role="content"> 
    <form id="login-form" data-ajax="false" method="post"> 
     <fieldset> 
      <input type="text" name="username" id="username" value="subin" placeholder="Username"> 
      <input type="password" name="password" id="password" value="passwordx" placeholder="Password"> 
      <input type="button" data-theme="b" name="submit" id="submit" value="Enter" data-icon="plus"> 
     </fieldset> 
    </form> 
    </div>

但這只是行不通的。服務器返回登錄失敗錯誤，但它對其他應用程序正常工作。

來源

2013-05-20 Subin Sebastian

你解決this.I得到了相同的error.Cant解決問題，這些問題的答案 – Sunny

@Sunny IIRC，我的問題是與服務器端。請閱讀已接受的答案及其評論。 –

其在郵差的工作。但不是在PhoneGap的應用錯字注 – Sunny

你有幾個錯誤代碼：

更改日期數據

data  : {username : 'subin', password : 'passwordx'},

刪除此行，它會阻止的PhoneGap的成功發佈：
```
xhrFields : {withCredentials: true}, 
```
在你beforeSend和完整使用此功能以顯示裝載機：
```
$.mobile.loading('show'); 
```
和
```
$.mobile.loading('hide'); 
```
您目前的那些在jQuery 1.2+中已棄用。

你的最終代碼應該是這樣的：

$.ajax({ 
    type  : "POST", 
    url  : "http://domain/public/login", 
    crossDomain: true, 
    beforeSend : function() {$.mobile.loading('show')}, 
    complete : function() {$.mobile.loading('hide')}, 
    data  : {username : 'subin', password : 'passwordx'}, 
    dataType : 'json', 
    success : function(response) { 
     //console.error(JSON.stringify(response)); 
     alert('Works!'); 
    }, 
    error  : function() { 
     //console.error("error"); 
     alert('Now working!');     
    } 
});

證據證明它的工作，只是從磁盤而不是從服務器上運行它，因爲你會得到一個跨域錯誤：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>   
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
     <script> 
    $.ajax({ 
     type  : "POST", 
     url  : "http://domain/public/login", 
     crossDomain: true, 
     beforeSend : function() {$.mobile.loading('show')}, 
     complete : function() {$.mobile.loading('hide')}, 
     data  : {username : 'subin', password : 'passwordx'}, 
     dataType : 'json', 
     success : function(response) { 
      //console.error(JSON.stringify(response)); 
      alert('Works!'); 
     }, 
     error  : function() { 
      //console.error("error"); 
      alert('Not working!');     
     } 
    });  
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="b" data-role="header"> 
       <h1>Index page</h1> 
      </div> 

      <div data-role="content"> 

      </div> 
     </div>  
    </body> 
</html>

來源

2013-05-20 12:01:31 Gajotres

只是想你的最終代碼，它看起來像它從服務器也可以。我沒有得到一個跨域錯誤 - 它被部署到我的Ipad。 –

我很高興它工作正常。:) – Gajotres

其實在拼寫錯誤中沒有代碼。代碼仍然不起作用。 :(可能是服務器端問題，請讓我試試 –

你有一個類型的位置：

date  : {username : 'subin', password : 'passwordx'}, 
//--^^^^----this should be named data

嘗試改變這樣的：

data  : {username : 'subin', password : 'passwordx'},

來源

2013-05-20 11:48:51 Jai

謝謝，這是不存在的代碼，因爲我發佈這個問題後改變了它。 –

使用的數據類型JSONP

dataType : 'jsonp'

可以支持跨域

來源

2015-11-07 20:55:03 AJchandu

請不要只提供一個鏈接，提及相關的東西 – Marged

我剛剛編輯我的答案....這就是我的意思@Marged – AJchandu

發送和接收JSON數據| PhoneGap的+ jQuery Mobile的使用應用AJAX（）

回答

相關問題