jQuery Mobile使用不含AJAX和JavaScript的PHP提交

Question

抱歉，我认为自己是jQuery Mobile的真正新手。 关于JavaScript我一点也不擅长。 就是这个 我想建立一个不使用AJAX的jQuery Mobile网站。 只需要jQuery Mobile的精美设计，然后使用PHP提交表单等。

我试图构建一个简单的页面，将名字和姓氏提交到MySQL数据库。 它将提交，告诉用户已提交，然后用户可以按[Page 2]查看所有结果。 现在，我使用if（isset（））显示消息，否则显示表单。 因此，进入站点的用户将获得表格，当按[Submit]时，他/她将收到有关姓氏和名字已提交的消息。 然后按[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]，我将看到已添加“测试测试”。 但是，当我然后按[索引]返回时，我希望它再次显示该表单，但是消息“已添加测试”！ 再次显示而不是表格，为什么？ 我必须更新页面以获得表格。 现在，如果启用了数据ajax，则可以使用提交和后退按钮。 但是 ，当我到达那里看到所有的名字和姓氏时，我必须按page2.php上的update。 我是否使自己了解问题所在？

抱歉，这是jQuery Mobile的新功能，我在G​​oogle找不到答案。 每个人都在使用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>