1

我有 jQuery 移动应用程序，当用户成功登录时，我必须显示通过 Ajax 和 json 动态解析加载的多页模板内容。

现在，当我调用 Ajax 时，它总是只进入错误部分。但我在谷歌浏览器控制台中检查了错误部分收到了返回值。那么为什么它不会成功阻止

这是我的代码

<!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>
4

3 回答 3

1

从您之前关于同一问题的帖子中，我认为问题在于您收到错误：Access-Control-Allow-Origin 不允许 Origin null。

当您的客户端尝试从与客户端所在域不同的服务器请求数据时，会出现此错误。您可能希望使用 CORS 或 JSONP 技术（仅支持 GET 请求）来处理此问题。

关于CORS，您可能需要阅读来自 Mozilla Developer Network的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>

我希望这有帮助。

于 2013-03-02T18:59:06.633 回答
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); 在错误块中添加以尝试找出错误代码和原因

于 2013-03-02T14:08:59.387 回答
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>
于 2013-03-02T15:15:33.520 回答