使用jquery ajax提交表单时没有重新加载

Question

当我提交表单时，它不更新数据库mysql中的值。这是一个用php写的表单。这是我的PHP和html。我想，表单不应该重新加载，它必须提交数据库的变化，而无需重新加载页面，并显示预加载1秒提交表单。HTML,PHP和表单的ACTION:这里的ACTION是当前页面，这个表单是可用的

detail_customer.php

<?php

$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);

if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}

if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo 'hello';
}
}
?>

<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php
" method="POST" class="c_form animate__animated animate__fadeIn">

<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>

<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>

<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id  ?>" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title  ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>

JS代码index.js

$("#form-submit").on("submit", function () {
// e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
success: function (data) {
$(".alert-success").show();
$(".alert-success").fadeOut(4000);
console.log(data);
},
error: function (data) {
$(".alert-danger").show();
$(".alert-danger").fadeOut(4000);
console.log(data);
},
});
return false;
});

Ajax成功响应，但是mySQL中没有更新数据

<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php" method="POST"
class="c_form animate__animated animate__fadeIn">

<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>

<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>

<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<br />
<b>Warning</b>:  Undefined variable $category_id in <b>C:xampphtdocsadmin_panelincdetail_customer.php</b> on line <b>62</b><br />
" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<br />
<b>Warning</b>:  Undefined variable $quest_title in <b>C:xampphtdocsadmin_panelincdetail_customer.php</b> on line <b>66</b><br />
" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>

Answer 1

条件if (isset($_POST['submit'])) {永远不会求值为true，因为表单中没有name="submit"的输入元素(name='submit'按钮默认不发送该属性)。

改变条件:

if (isset($_POST['quest_t'])) { ...

或者，使用name='submit'包含一个输入元素，例如:

<input name="submit" type="hidden" />

同时，确保将$_POST检查移到文件开头，并确保如果收到POST请求，PHP文件中不会评估其他代码(例如HTML代码的其余部分)。

Answer 2

在方法结束后返回false。

jQuery有自己的方法来确保"preventDefault()"它只是从提交处理程序返回false。

完整背景:

event.preventDefault() vs. return false

Answer 3

问题解决。通过更改路径，然后重新放置js文件的路径。