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>';

?>

Submit.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事件挂钩到form，而不是提交button。

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

Answer 2

$('this').serialize();

应该是：

$(this).serialize();

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

2 个答案: