我有jQuery移动应用程序，当用户成功登录时，我必须显示通过Ajax和json动态解析加载的多页模板内容。
现在，当我调用Ajax时，它总是只进入错误部分。但我在谷歌Chrome控制台检查错误sction收到返回值。那么为什么它不会成功阻止
这是我的代码
<!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>
答案 0 :(得分：1)
从您之前关于同一问题的帖子中，我认为问题是您收到错误：Access-Control-Allow-Origin不允许使用Origin。
当您的客户端尝试从驻留在客户端所在的不同域中的服务器请求数据时，会出现此错误。您可能希望使用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"});
以下示例基于您的代码。您应该检查服务器上的服务是否返回了一个JavaScript函数调用（回调），其中传入的JSON数据作为参数（例如：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>
我希望这会有所帮助。
答案 1 :(得分：0)
添加数据类型
就像这样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);
在错误块内部尝试找出错误代码和原因
答案 2 :(得分：0)
看看你要做什么：
form the docs:
你在jQuery中学到的第一件事就是在里面调用代码 $（document）.ready（）函数，所以一切都会尽快执行 DOM已加载。但是，在jQuery Mobile中，Ajax用于加载 导航时每个页面的内容都放入DOM中，并准备好DOM 处理程序仅对第一页执行。每当执行代码时 加载并创建新页面，您可以绑定到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>