ajax 和 php - 我的代码以某种方式重复了元素答案

【问题标题】：ajax and php - my code is somehow duplicate the elementsajax 和 php - 我的代码以某种方式重复了元素
【发布时间】：2021-07-02 17:12:56
【问题描述】：

我是 ajax 新手，我尝试学习它。我得到了这个代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script>
        $(document).ready(function(){
          
            /**Add Ajax**/
            $("#add-car-form").submit(function (evt) {
                evt.preventDefault();//prevent form to be submitted as null
                var postData=$(this).serialize();//get all the data from the form
                var url=$(this).attr('action');//the url is the action attribute
                $.post(url, postData, function(php_table_data){//send back the data from the url
                    $("#car-result").html(php_table_data);
                });
            });
        });//End Document Ready
    </script>
</head>
<body>
    <div id="container" class="col-xs-6 col-xs-offset-3">
        <div class="row">
        <h2>Search our Database</h2>
        <input class="form-control" type="text" name="search" id="search" placeholder="search our inventory">
        <br>
        <br>
        <h2 class="bg-success" id="result"></h2>
        </div>
        <div class="row">
            <form method="post" id="add-car-form" action="add_cars.php" class="col-xs-6">
                <div class="form-group">
                <input type="text" name="car_name" class="form-control">
                </div>
                <div class="form-group">
                <input type="submit" class="btn btn-primary" value="add car">
                </div>
            </form>
            <div class="col-xs-6">
                <div id="car-result">

                </div>
            </div>
        </div>
    </div>
</body>
</html>

我得到了 add_car.php

<?php
include "../db.php";
if(isset($_POST['car_name'])){
    $car_name=$_POST['car_name'];
    $query="INSERT INTO cars(cars) VALUES('{$car_name}')";
    $query_car_name=mysqli_query($connection,$query);
    if(!$query_car_name){
        die("QUERY FAILED".mysqli_error($connection));
    }
    header("Location: index.html");
}
?>

现在，当我在表单中单击提交时，sql statemant 正在工作，但结果是我得到了一个重复的表单

这是插入数据前的图片： enter image description here

这是插入数据后的结果： enter image description here

【问题讨论】：

header("Location: index.html"); - 为什么在 AJAX 调用中执行重定向？你期待发生什么？通常，AJAX 调用只会返回客户端代码所需的任何数据，通常是 JSON 甚至只是一个字符串。
您的 add_car.php 脚本应该返回一些数据，而不是重定向到带有表单的页面。

标签： javascript php jquery mysql ajax

【解决方案1】：

在 add_car.php 中像这样更改您的代码

<?php
    include "../db.php";
    if(isset($_POST['car_name'])){
        $car_name=$_POST['car_name'];
        $query="INSERT INTO cars(cars) VALUES('{$car_name}')";
        $query_car_name=mysqli_query($connection,$query);
        if(!$query_car_name){
            die("QUERY FAILED".mysqli_error($connection));
        }
        $table="<table><thead><tr><th>ID</th><th>Car Name</th></tr></thead><tbody>";
        $query="Select * From cars ORDER BY id DESC";
        $result=mysqli_query($connection,$query);
        if($result){
           while($row = $result->fetch_assoc()) {
              $table.="<tr><td>" . $row["id"]. "</td><td>" . $row["cars"]."</td></tr>";
              }
        }
       $table.="</tbody></table>";
    
       echo $table;
    
    }
    ?>

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。