添加到数据库时使用 AJAX 防止刷新答案

【问题标题】：Use AJAX to prevent refresh when adding to a database添加到数据库时使用 AJAX 防止刷新
【发布时间】：2020-07-19 13:58:51
【问题描述】：

我是一名计算机科学专业的学生，大二。为了独立学习，我决定使用以下技术创建一个网站：SQL、PHP、JS、AJAX、BOOTSTRAP。我正在尝试向数据库添加内容，我使用 AJAX - 我不想刷新页面，所以我使用 AJAX。我设法将内容添加到数据库 - 但页面刷新。我尝试使用 jquery - 当我添加内容时 - 来防止刷新。代码有效 - 但仍有刷新。

访问数据库的代码：

<?php

$DBConInfo = [
    'server'   => '127.0.0.1',
    'username' => 'root',
    'password' => '',
    'name'     => 'test',
];
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$conn = new mysqli($DBConInfo['server'],$DBConInfo['username'], $DBConInfo['password'],$DBConInfo['name']);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";

// php code to Insert data into mysql database from input text
if(isset($_POST['insert']))
{
    $hostname = "127.0.0.1";
    $username = "root";
    $password = "";
    $databaseName = "test";

    // get values form input text and number

    $name = $_POST['name'];
    $description = $_POST['description'];
    $price = $_POST['price'];
    $picture = $_POST['picture'];

// mysql query to insert data

    $query = "INSERT INTO `product`(`name`,`description`, `price`, `picture`) VALUES ('$name','$description','$price','$picture')";

    $result = mysqli_query($conn,$query);

// check if mysql query successful

    if($result) {
        echo 'Data Inserted';
    }
    else{
        echo 'Data Not Inserted';
        var_dump($conn->error);
    }

    //mysqli_free_result($result);
    mysqli_close($conn);
}

?>

<!DOCTYPE html>

<html>

<head>

    <title> PHP INSERT DATA </title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
<form id="form-insert" action="" method="post">

    <!--<input type="text" name="id" required placeholder="id"><br><br>-->

    <input type="text" name="name" required placeholder="Name"><br><br>

    <input type="text" name="description" required placeholder="description" min="10" max="100"><br><br>

    <input type="text" name="price" required placeholder="price"><br><br>

    <input type="text" name="picture" required placeholder="picture" min="10" max="100"><br><br>

    <input id="submit-insert" type="submit" name="insert" value="Add Data To Database">

</form>

<span id="result"></span>

<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src ="js/DBscript.js" type="text/javascript"></script>
</body>

</html>

使用 ajax - 防止刷新：

$("#submit-insert").click( function() {
    $.post( $("#form-insert").attr("action"),
        $("#form-insert :input").serializeArray(),
        function(info){ $("#result").html(info);
        });
    //clearInput();
});

$("#form-insert").submit( function() {
    return false;
});

function clearInput() {
    $("#form-insert :input").each( function() {
        $(this).val('');
    });
}

【问题讨论】：

标签： javascript php html jquery mysql

【解决方案1】：

提交表单后你必须使用event.preventDefault()

   $("#submit-insert").click( function(event) {
        event.preventDefault();
    });


$('#form-insert').on('submit', function (event) {
    event.preventDefault();
    
    $.ajax({
        type    : 'post',
        url     : 'NameOfPHPFile.php',
        data    : $('#form-insert').serialize(),
        success : function () {
          alert('form was submitted');
        }
    });

});

【讨论】：

非常感谢您的回答，我添加了您告诉我的代码行。我想也许我还有另一个问题，在我添加了你告诉我的代码行之后，像以前一样刷新了。也许我输入的代码没有达到这个功能——我不明白为什么。
@masterHaham 你能不能在这个函数中console.log 看看你提交表单时它是否被触发？在提交表单后编辑了应该是的答案。不知道为什么你有 2 个提交到同一个表单。
错字：event.preventDefault()。注意大写的“D”
感谢您的帮助，我按照您告诉我的代码进行操作。我添加了console.log。我是 php 和 sql 的新手——所以我不确定。我得到的错误是“GET localhost/final%20project/script/jquery-1.8.1.min.js net::ERR_ABORTED 404 (Not Found)”
基于 404 错误，您应该确认您的 <script> 标签的路径。他们几乎肯定是不正确的。 https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls