jQuery mobile 跨域请求答案

【问题标题】：jQuery mobile Cross domain requestjQuery mobile 跨域请求
【发布时间】：2013-03-02 13:51:59
【问题描述】：

我有 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>

【问题讨论】：

你可能不应该在这里为你的 api 发布工作凭据。
您可能不应该一开始就在客户端提供您的凭据。
哦，是的，那也是。 :)
this.append(finalData); 在 ajax 回调之外不起作用，AJAX 是异步的。登录是否会导致重定向到https？由于跨域，这将导致 ajax 错误。还是您调用的 URL 与页面在同一个域上？
ajax = asynchronous ...如果您没有使用async: false 设置ajax 请求，您的脚本应该在this.append(finalData); 这一行遇到错误。最好将this.append 放在成功/错误函数中

标签： jquery ajax json cordova jquery-mobile

【解决方案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>

我希望这会有所帮助。

【讨论】：

如果服务器没有将响应格式化为 jsonpCallback ，请求会发生什么？

【解决方案2】：

添加数据类型

例如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】：

看看你必须做什么：

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>

【讨论】：