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

Submitting AJAX form, redirects instead of processing on page

本文关键字：处理 表单 AJAX 重定向 提交      更新时间：2024-05-13

因此，当用户访问我的页面时，我有一个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');
    }
?>

您应该将submit事件挂接到form，而不是提交button。

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

$('this').serialize();

应为：

$(this).serialize();

相关文章：