添加到數據庫時使用 AJAX 防止刷新

Question

我是一名計算機科學專業的學生，在我大二的時候。 為了獨立學習，我決定創建一個網站，使用以下技術：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('');
    });
}

Answer 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');
        }
    });

});

添加到數據庫時使用 AJAX 防止刷新

問題描述

1 個解決方案

解決方案1
0 已采納 2020-07-19 14:02:01

添加到數據庫時使用 AJAX 防止刷新

問題描述

1 個解決方案

解決方案1 0 已采納 2020-07-19 14:02:01

解決方案1
0 已采納 2020-07-19 14:02:01