php - 如何提交 PHP 表单而不重定向到操作文件？ (使用ajax发送和获取数据)

Question

我通过单击index.php中带有$("#btn").load("form.php")的按钮来加载表单， 我想避免在提交后将页面重定向到操作文件，并在表单下的表格中添加一个项目。

我的演示位于 http://price.parag.website

<?php include "../connection.php" ?>

<h1>Add CPU</h1>

<form method="post" action="actions/cpu_action.php">
    <label for="name">Name</label>
    <input type="text" name="cpu_name" />
    <label for="price">Price</label>
    <input type="text" name="cpu_price" />
    <input type="submit" value="Add" />
</form>
<?php

$sql = "SELECT id, cpu_name, cpu_price FROM cpu";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    echo "<table>
    <thead>
    <tr>
    <th>ID</th>
    <th>CPU NAME</th>
    <th>CPU PRICE</th>
    </tr>
    </thead>";

    while($row = $result->fetch_assoc())
    {
    echo "<tr>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['cpu_name'] . "</td>";
    echo "<td>" . $row['cpu_price'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

Answer 1

<h1>Add CPU</h1>

<form id="formupload" method="post" action="actions/cpu_action.php">
    <label for="name">Name</label>
    <input type="text" name="cpu_name" />
    <label for="price">Price</label>
    <input type="text" name="cpu_price" />
    <input type="submit" value="Add" />
</form>

现在我们必须清除表单的默认操作(我将使用 jquery)

     $('#formupload').on('submit',function(e){
             e.preventDefault();
         var formData = new FormData(this);
            $.ajax({
                type:'POST',
                url: $('#formupload').attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(result){
         if(condition){}
         else{}
    }
    })
   })

试试这个，它会起作用