jQuery移動跨域請求
[英]jQuery mobile Cross domain request
問題描述
我有一個jQuery移動應用程序，當用戶成功登錄時，我必須顯示通過Ajax和json動態解析加載的多頁模板內容。
現在，當我打電話給Ajax時，它總是只進入錯誤部分。 但是我在google chrome控制台中檢查了該錯誤部分是否收到了返回值。 那么為什么它不會成功
這是我的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<title>Insert title here</title>
<script>
(function($) {
$.fn.getPageData = function() {
var finalData = "";
$.ajax({
url : "http://india.msg91.com/api/androidRoute4.php?user=admin_sapna&password=***********",
type : "GET",
success : function(data) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>';
},
error : function(result) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">Error Page</h3></div></div>';
}
});
this.append(finalData);
};
})(jQuery);
$(document).ready(function() {
$('body').getPageData();
//$(a).appendTo("body");
});
</script>
</head>
<body>
</body>
</html>
3 個解決方案
解決方案1
1 已采納 2013-03-02 18:59:06
從您以前關於同一問題的帖子中，我相信問題是您收到了以下錯誤：Access-Control-Allow-Origin不允許使用Origin null。
當您有一個客戶端嘗試從位於客戶端所在域之外的其他域中的服務器請求數據時，會出現此錯誤。 您可能想要使用CORS或JSONP技術（僅支持GET請求）來解決此問題。
關於CORS ，您可能想從Mozilla開發人員網絡中閱讀Access_control_CORS文檔。
JSONP用於從位於不同域的服務器請求數據。 它允許客戶端發出跨站點請求，這是使用標准AJAX技術所不允許的。 我們需要這種技術來訪問來自不同域的數據，更具體地說，如果協議，端口號，主機與請求數據的位置不同，則需要這種技術。 這些跨站點請求與服務交互，這些服務返回JSON格式的數據以及一些其他填充。 這就是為什么它被稱為JSONP（JSON和Padding）的原因。
JSON有效負載類似於： { "id" : "test", "message": "test message"} 。 JSONP有效負載是包裝在函數調用中的JSON格式對象，例如： jsonpCallback( { "id" : "test", "message": "test messsage"});
下面的示例基於您的代碼。 您應該檢查服務器上的服務是否以傳入的JSON數據作為參數返回JavaScript函數調用（回調）（示例： jsonpCallback( { "id" : "test", "message": "test messsage"}); ）。
<!doctype html>
<html lang="en">
<head>
<title>jQM JSONP Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
function getData() {
$.ajax({
type: 'GET',
url: "http://india.msg91.com/api/androidRoute4.php",
contentType: "application/json",
dataType: 'jsonp',
jsonp : "callback",
jsonpCallback: 'jsonpCallback',
success: function() {
alert('success');
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + xhr.status + "\n" +
"Message: " + xhr.statusText + "\n" +
"Response: " + xhr.responseText + "\n" + thrownError);
}
});
}
function jsonpCallback(data) {
// do something with the response
alert(data);
}
$(document).on( "pageinit", "#test-page", function( e ) {
getData();
});
</script>
</head>
<body>
<div id="test-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQM JSONP Test</a></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
我希望這有幫助。
解決方案2
0 2013-03-02 14:08:59
添加數據類型
例如dataType: "html" ajax func就變成這樣
$.ajax({
url : "http://india.msg91.com/api/androidRoute4.php?user=admin_sapna&password=!Passw0rd",
type : "GET",
dataType: "html",
success : function(data) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>';
},
error : function(result) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">Error Page</h3></div></div>';
}
});
您還可以添加console.log("error" + result.status + result.statusText); 在錯誤塊內嘗試找出錯誤代碼和原因
解決方案3
0 2013-03-02 15:15:33
查看您必須執行的操作：
form the docs:
在jQuery中學習的第一件事是調用$（document）.ready（）函數中的代碼，以便一旦加載DOM，一切都將執行。 但是，在jQuery Mobile中，Ajax用於在導航時將每個頁面的內容加載到DOM中，而DOM ready處理程序僅對第一頁執行。 要在每次加載和創建新頁面時執行代碼，可以綁定到pageinit事件。
腳本的順序應該是這樣的：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
因此您的代碼順序應如下所示：
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
(function($) {
$.fn.getPageData = function() {
var finalData = "";
$.ajax({
url : "http://india.msg91.com/api/androidRoute4.php?user=admin_sapna&password=***********",
type : "GET",
dataType :'html', //<---------need to specify what should be expected.
success : function(data) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>';
},
error : function(result) {
finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">Error Page</h3></div></div>';
}
});
this.append(finalData);
};
})(jQuery);
$(document).on('pageinit', function () {
$('body').getPageData();
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
jQuery跨域請求
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.