Question

如果从菜单页面（test_menu.html）调用提交页面（test_page2.html），则始终返回空白页面。正常返回如果直接调用提交页面（test_page2.html）

很抱歉要向那里提交大量内容，内容就像我一样简单。

有没有人有相同的经验并且知道这是错误还是我的代码中遗漏了一些东西？可以从http://wh5.info/pub/test_menu.html

访问实时演示

testament.html的内容

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">    
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>TEST</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>  
        <div data-role="page" id="createcamp">
        <div data-theme="b" data-role="header" data-position="fixed">
          <h1 id="header" data-theme="e">Menu</h1>
            </div>
            <div class="cntrBlock">
                <ul data-role="listview" data-inset="true">
                    <li data-role="list-divider">Menu</li>
                    <li><a href="test_page2.html">Goto Page 2</a></li>
                </ul>
            </div>
          <div data-theme="b" data-role="footer" data-position="fixed">
              <h1 id="footer">Copyright &copy; ABC</h1>
          </div>
        </div>
    </body>
</html>

test_page2.html的内容

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <title>TEST</title>
        <script type="text/javascript">

            $(document).ready(function(){
                $(function () {
            $('#form1').submit(function(e) {
                e.preventDefault();
              $.ajax({
                cache: false, 
                type: "POST", 
                dataType: "json",
                            data: $('#form1').serialize(),
                url: $('#form1').attr('action'),
                complete: function (HttpRequest, textStatus) {
                    console.log(HttpRequest);
                    $obj = JSON.parse(HttpRequest.response);
                    $('#loginname').val($obj.login);
              }});
              return false;
            });
          });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="createcamp">
        <div data-theme="b" data-role="header" data-position="fixed">
          <h1 id="header" data-theme="e">Submit Page</h1>
            </div>
            <div data-role="content">
                <div class="campBlock">
                    <div id="message"></div>
                    <form action="test_php.php" method="POST" id="form1" name="form1">
                        <fieldset>
                            <label for="login" id="login_msg">Login</label>
                            <input type="text" name="loginname" id="loginname" />
                            <input type="submit" value="Submit"/>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

test_php.php的内容

<?php

$arr = array('login' => 'pass', 'message' => 'Well done!');

echo json_encode($arr);

?>

Answer 1

你的test_page2.html应该如下所示。

从中删除head，html和body标记

test_page2.html的内容

<script type="text/javascript">
    $(function () {
        $('#form1').submit(function(e) {
            e.preventDefault();
            $.ajax({
                cache: false, 
                type: "POST", 
                dataType: "json",
                data: $('#form1').serialize(),
                url: $('#form1').attr('action'),
                complete: function (HttpRequest, textStatus) {
                    console.log(HttpRequest);
                    $obj = JSON.parse(HttpRequest.response);
                    $('#loginname').val($obj.login);
                }
            });
            return false;
        });
    });
</script>

<div data-role="page" id="createcamp">
<div data-theme="b" data-role="header" data-position="fixed">
  <h1 id="header" data-theme="e">Submit Page</h1>
    </div>
    <div data-role="content">
        <div class="campBlock">
            <div id="message"></div>
            <form action="test_php.php" method="POST" id="form1" name="form1">
                <fieldset>
                    <label for="login" id="login_msg">Login</label>
                    <input type="text" name="loginname" id="loginname" />
                    <input type="submit" value="Submit"/>
                </fieldset>
            </form>
        </div>
    </div>
</div>

Answer 2

当您从test_page2.html转到test_menu.html时，它会通过ajax调用加载，而不是正常的HTTP（我认为它是jQuery移动功能）。看起来只有页面正文通过此调用加载，因此您没有表单提交处理程序，因为它位于head标记内。

如果您直接转到浏览器中的test_page2.html，则会通过script标记中的表单提交处理程序head通过正常的HTTP请求加载。

有关jQuery移动导航的更多信息：http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

所以我建议：

使用提交处理程序在script内移动<div data-role="page"/>标记，以便可以通过jQuery mobile ajax导航例程加载它。
使用pageinit事件根据jQuery移动文档的建议附加处理程序（而不是$(document).ready）。

来自同一个ajax调用的返回不一致

2 个答案: