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.