jquery - jQuery モバイルクロスドメインリクエスト

Question

ユーザーが正常にログインしたときに、Ajax と json を動的に解析して読み込まれた複数ページのテンプレートコンテンツを表示する必要がある jQuery モバイルアプリがあります。

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>

score 1 · Accepted Answer

同じ問題に関する以前の投稿から、問題は次のエラーが表示されることだと思います: Origin null is not allowed by Access-Control-Allow-Origin.

このエラーは、クライアントが存在するドメインとは異なるドメインに存在するサーバーからデータを要求しようとするクライアントがある場合に表示されます。この問題に対処するには、CORS または JSONP 手法 (GET 要求のみをサポート) を使用することをお勧めします。

CORSに関しては、Mozilla Developer NetworkのAccess_control_CORSドキュメントを参照してください。

JSONPは、別のドメインに存在するサーバーからデータを要求するために使用されます。これにより、クライアントは、標準の AJAX 技術では許可されないクロスサイトリクエストを行うことができます。別のドメインからデータにアクセスするには、この手法が必要です。具体的には、プロトコル、ポート番号、ホストがデータが要求されている場所と異なる場合です。これらのクロスサイトリクエストは、追加のパディングと共に JSON 形式のデータを返すサービスとやり取りします。そのため、JSONP (JSON with 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>

これが役立つことを願っています。

score 0 · Accepted Answer

データ型を追加する

このように、たとえば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); して、エラーコードと理由を見つけることもできます

score 0 · Accepted Answer

あなたがしなければならないことを見てください：

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 - jQuery モバイル クロス ドメイン リクエスト

3 に答える 3

Related

Reference

jquery - jQuery モバイルクロスドメインリクエスト