0

我正在使用 jQuery Mobile 构建一个 PhoneGap 应用程序。我的 JSONP 跨域通信工作正常，但包含 jQuery Mobile 时出现问题。 没有它，一切都按预期工作，包括在内，它停止工作。

我已将代码简化为最简单的形式 - 使用 JSONP 序列化数据、编码和调用 CrossDomain 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>

测试URLd.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

使用 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 回答
0

当您使用该submit()方法但触发 ajax 调用时，您并没有禁止表单提交。

return false;在方法的末尾添加一个$("#foo").submit。这将禁止页面重新加载 onclick。

于 2012-06-13T01:13:02.767 回答