javascript - 提交AJAX表单，重定向而不是在页面上处理

Question

因此，当用户访问我的页面时，我有一个 ajax 函数，它可以获取数据库中的行数并吐出该数字(工作正常)。我还有一个表单，用户可以在其中提交单词。我想做的是，当用户向数据库提交一个单词时，AJAX 将处理提交，然后运行一个函数来获取数据库中的新行数。

此代码重定向到submit.php页面，而不是在主页上处理所有内容

AJAX

$(document).ready(function() {
   display();

   $('.add').on('submit', function (e) {
       e.preventDefault();
       $.ajax({
            type: 'post',
        url: 'submit.php',
        data: $('this').serialize(),
        success: function () {
            display();
        }
        });
    });


});

function display() {
    $(".container").load("ajax.php").hide().delay(500).fadeIn(1500);
}

HTML

<div class="container"></div>
    <form  action="submit.php" method="post">
        <input type="text" name="word">
        <input type="submit" class="add" name="add" value="add">
    </form>

ajax.php

<?php
        $conn = mysqli_connect('localhost', 'root', '', 'test') or die('error could not connect');
        $query = "SELECT * FROM test";
        $result = mysqli_query($conn, $query) or die ('error could not query');

        $num = mysqli_num_rows($result);

        echo '<h1>'.$num.'</h1>';

?>

提交.php

<?php
    if(isset($_POST['add'])) {
        //Connect
        $word = $_POST['word'];

        $conn = mysqli_connect('localhost', 'root', '', 'test') or die('error could not connect');
        $query  = "INSERT INTO test VALUES(0, '$word')";
        mysqli_query($conn, $query) or die('error could not query');

    }
?>

Answer 1

您应该将 submit 事件 Hook 到 form，而不是提交按钮。

按钮没有提交事件，这就是为什么你的按钮没有被连接的原因。