0

jQuery Mobile を使用して PhoneGap アプリを構築しています。JSONP クロスドメイン通信は機能しますが、jQuery Mobile が含まれていると問題が発生します。 それがなければ、すべてが期待どおりに機能し、機能しなくなります。

コードを最も単純な形式に減らしました - JSONP を使用して、データをシリアル化し、クロスドメイン PHP ファイルをエンコードして呼び出します。成功関数を実行します。悪いJSかもしれないと思ったのですが、「アラート」が機能し、JSエラーはありません。しかし、 $('#section1').html("SECTION 1 - " + data.message); 更新しません。 注: jQM を削除すると、すべて機能します。

以下は、HTML とそれが呼び出す PHP コードです。jQueryMobile AJAX 呼び出しが .html コードの更新を妨害しているようです。何か案は？私は困惑しています。

Ajax4d.htm

<html><head><title>First jQueryMobile Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

  <script>
     $(document).ready(function() {
         $("#foo").submit(function(event) {                
             event.preventDefault();
             var $form = $(this), 
                         $inputs = $form.find("input, select, button, textarea"),
                         serializedData = $form.serialize();
             var postData = serializedData;
             var urlStr = "http://www.fohost.co/testURLd.php?";

             alert (urlStr + encodeURI(postData));                    
             $.ajax({
                  url: urlStr,
                  data: encodeURI(postData),
                  dataType: "jsonp",
                  success: function(data){
                     alert("SUCCESS callback before HTML update: " + data.message);
                     $('#section1').html("SECTION 1 - " + data.message);
                     }
                  });
             });
         }); 
</script>
</head>

<body>
    <section id="register_page" data-role="page" data-theme="b">
        <div data-role="content">
            <form id="foo" method="get" action="">
                <fieldset data-role="fieldcontain">
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" value="Chris" placeholder="Username"/>
                </fieldset>
                <fieldset class="ui-grid-a"><input type="submit" value="Send" /></fieldset>
            </form>
        </div>
        <div id="section1">SECTION</div>
    </section>
</body>
</html>

testURLd.php

<?php
header("content-type: application/json"); 

$user = $_GET['username'];

$rtnjsonobj->success = "true";
$rtnjsonobj->user = $user;
$rtnjsonobj->message = "Stored User: " . $user;

echo $_GET['callback']. '('. json_encode($rtnjsonobj) . ')';    
?>
4

2 に答える 2

0

メソッドを使用しているときにsubmit()ajax 呼び出しを実行しても、フォームの送信が禁止されているわけではありません。

メソッドreturn false;の末尾にa を追加します。$("#foo").submitこれにより、ページが onclick でリロードされなくなります。

于 2012-06-13T01:13:02.767 に答える
0

document ready の代わりに pageinit を使用してください。このリンクを確認してください。

http://jquerymobile.com/test/docs/api/events.html

これを試してみてください..

$( document ).delegate("#register_page" ,"pageinit", function() {

     $("#foo").submit(function(event) {                
         event.preventDefault();
         var $form = $(this), 
                     $inputs = $form.find("input, select, button, textarea"),
                     serializedData = $form.serialize();
         var postData = serializedData;
         var urlStr = "http://www.fohost.co/testURLd.php?";

         alert (urlStr + encodeURI(postData));                    
         $.ajax({
              url: urlStr,
              data: encodeURI(postData),
              dataType: "jsonp",
              success: function(data){
                 alert("SUCCESS callback before HTML update: " + data.message);
                 $('#section1').html("SECTION 1 - " + data.message);
                 }
              });
         });
});
于 2012-06-12T02:58:24.550 に答える