jQuery Mobile 使用 PHP 提交，没有 AJAX 和 JavaScript

Question

抱歉，我认为自己是 jQuery Mobile 的真正新手。关于JavaScript，我一点也不擅长。事情就是这样。我想在不使用 AJAX 的情况下构建一个 jQuery Mobile 网站。只想要 jQuery Mobile 的漂亮设计，然后使用 PHP 提交表单等。

我尝试构建一个将名字和姓氏提交到 MySQL 数据库的简单页面。它将提交，告诉用户它已提交，然后用户可以按 [Page 2] 来查看所有结果。现在我使用 if(isset()) 来显示消息并使用 else 来显示表单。因此，进入网站的用户会得到表单，当按下[提交]时，他/她会得到名字和姓氏已提交的消息。然后按 [Page 2] 按钮查看所有名字和姓氏。

PHP (index.php)

if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add">

    </form><br>';
}

<a href="page2.php" data-role="button">Page 2</a>

PHP (page2.php)：

$query = $db->query("SELECT * FROM name");

while($row = $query->fetch(PDO::FETCH_ASSOC)) {
    echo $row['fname'] . ' ' . $row['lname'] . '<br>';
}

$db = NULL;

echo '<a href="index.php" data-role="button">Index</a>';

假设我输入“Test”作为名字和姓氏。它将回显“添加了测试测试！”。如果我现在按 [Page 2]，我将看到添加了“Test Test”。 但是当我按下 [Index] 返回时，我希望它再次显示表单，但消息“已添加测试测试！”再次显示而不是表单，为什么？我必须更新页面才能获取表单。现在，如果我启用 data-ajax，它正在使用提交和后退按钮。 但是 然后我必须在 page2.php 上按更新，当我到达那里时才能看到所有的名字和姓氏。我是否让自己明白问题所在？

抱歉，在 jQuery Mobile 上真的很新，我在 Google 上找不到答案。每个人都在使用 JavaScript 提交数据。有可能这样还是我必须学习 JavaScript 才能提交表单？在某处阅读使用按钮而不是提交按钮会影响它。

提前致谢！ :)

Answer 1

我认为您希望在请求后修改 DOM？所以发布表单，添加用户然后显示结果，而无需单击按钮。

所以在你的 ajax 调用中使用 done 函数来隐藏表单并显示结果。

看看下面，如果有帮助，请告诉我。

编辑：为按钮添加了 .on 点击​​。您可能还想查看在输入中添加按键检查器或在表单上添加 onsubmit。

<div id="content">
<?php
if(isset($_POST['send'])) {

    $insert = $db->prepare("INSERT INTO name (fname, lname) VALUES(:fname, :lname)");
    $insert_array = array(
        ":fname" => $_POST['fname'],
        ":lname" => $_POST['lname']
    );

    $insert->execute($insert_array);

    $db = NULL;

    echo $_POST['fname'] . ' ' . $_POST['lname'] . ' was added!<br><br>';
}

else {
    echo '
    <form method="post" data-ajax="false" id="contentForm">

        First name:
        <input type="text" name="fname"><br>

        Last name:
        <input type="text" name="lname"><br>

        <input type="submit" name="send" value="Add" id="sendButton">

    </form><br>';
}
?>
</div>

<script type='text/javascript'>
<!-- https://api.jquery.com/jQuery.ajax/ -->
$('#sendButton').on("click", function(){ 
    $.ajax({
      type: "POST",
      url: "page2.php",
      data: $('#contentForm').serialize()
    })
      .done(function( msg ) {
        $('#content').html( msg );
    });
});
</script>