3

私はPhonegapとjQueryの初心者ですが、jQueryajaxを介してフォームを送信する方法を研究しました。このコードはWebページでは機能しますが、Phonegapによってビルドおよびインストールされると、Androidエミュレーターでは失敗します。ご覧のとおり、を設定しました$.mobile.allowCrossDomainPages = true;。エミュレータでこれをテストすると、画面が数回点滅し、ページがリロードされたかのようにフォームがクリアされ、サーバーに何も書き込まれません。 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
    </title>
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="enter.css" />
    <style>
        /* App custom styles */
    </style>

    <script>
        $( document ).bind( "mobileinit", function() {
          // Make your jQuery Mobile framework configuration changes here!

          $.mobile.allowCrossDomainPages = true;
        });

        function doform()
        {

            var datas = $("#enteractivity").serialize();
            $.ajax({

              url: "http://www.scottallencarter.com/llp/record.logactivity",
              data: datas,
              async: false,
              cache: false,
              dataType: 'text',
              type: 'POST',
              jsonp: 'jsoncallback',
              timeout: 120000,
              crossDomain: true,
              error: function (xhr, ajaxOptions, thrownError) {
                    alert('error');

                },
              success: function(msg){ 
                    alert('done success');
                    return true;
                }
            });


        }
    </script>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <script src="enter.js"></script>
</head>
<body>
    <!-- Home -->
    <div data-role="page" data-theme="a" id="page1">
        <div data-theme="c" data-role="header">
            <h3>
                Activity
            </h3>
        </div>
        <div data-role="content">
            <form id="enteractivity" name="enteractivity" onsubmit="doform()">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup">
                        <label for="activityspecifics">
                            Activity
                        </label>
                        <input name="activityspecifics" id="activityspecifics" placeholder="Enter Activity" value="" type="text" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <label for="category">
                        Category:
                    </label>
                    <select name="category" data-theme="c">
                        <option value="">(choose one)</option>
                        ...
                        <option value="Test">Test</option>
                    </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="activityInCategory">
                        Specific Category:
                    </label>
                    <select name="activityInCategory" data-theme="c">
                        <option value="AddSubCategory">+ Add New Specific Category</option>
                        <option value="">------------</option>
                        ...
                    </select>

                </div>
                <input type="hidden" name="userid" value="1-1-1-1-1">
                <input type="hidden" name="mobile" value="true">
                <input type="submit" data-inline="true" data-theme="b" data-icon="arrow-r" data-iconpos="left" value="Submit" />
            </form>
        </div>
    </div>
</body>

また、フォームがWebページから送信する場合、常にエラーが返されます。成功するためにサーバー側から何を返す必要があるのか​​わかりません。

4

3 に答える 3

0

OK、問題が見つかりました。実際には、jquerymobileがどのように機能するかについての誤解でした。フォームのあるページは別のページからリンクされており、デフォルトのjquery mobileの動作では、ajaxを介してページをロードし、headセクションを無視します。フォームを送信するためのスクリプトは、headタグに含まれていました。ajaxフォーム送信のスクリプトをページのbodyタグの下部に移動すると、問題が修正されました。助けてくれてありがとう、そしてこれが他の誰かに役立つことを願っています。

于 2012-11-27T04:44:53.827 に答える
0

index.htmlPhonegapが最初の実行からファイルを読み取っただけかどうかはわかりません。

したがって、ajaxフォームの送信form.htmlをindex.htmlbodyタグの下部に移動します。

私のためのその仕事

于 2013-03-09T23:57:28.023 に答える
-1

POSTとJSONPを混在させることはできません。JSONPはGETを使用しています。
ただし、サーバーはJSONPをサポートする必要があります。あなたの例を見ると、これはすでに当てはまるはずです。

これを試してください：これ
が実際の例です、私は使用しています：

$.ajax({
    url: 'http://www.yoursite.com',
    contentType: "application/json; charset=utf-8",
    data: datas,
    dataType: "jsonp",
    success: function (json) {
        // Do some stuff
    },
    error: function (data, textStatus) {
        // Error handling
    }
});

編集：参考までに、 POST
を 介してデータをクロスドメインで送信している場合、ブラウザが応答を破棄するため（存在していても）、常にエラーが発生します。 ローカルのhtmlページ（サンプルコードを使用）を作成し、ブラウザーで開くことができます。 その後、フィドラーとファイアバグでトラフィックをチェックします。AFAIK、 JSONP を使用したクロスドメインリクエストからのみデータを受信できます。


よろしくお願いします

于 2012-11-25T00:19:50.803 に答える