使用 ajax 提交表单数据时出现问题

Question

我是 ajax 的新人。我知道 html、php。我想在 ajax 中进行 CRUD 操作。我创建了一个两个文件

index.php
insert.php如下。

当我点击提交按钮时，它提交数据并插入数据库。但它会刷新页面。请告诉我我在哪里犯了错误。

我的代码如下：

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Ajax test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <script type="text/javascript">
    var frm = $('#contactForm1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });

        ev.preventDefault();
    });
</script>


</head>
<body>
<form id="contactForm1" action="insert.php" method="post">
 <label>Name</label><input type="text" name="user_name"><br>
  <label>Age</label><input type="number" name="user_age"><br>
   <label>Course</label><input type="text" name="user_course">
   <br>
   <input type="submit" name="sumit" value="submit">
</form>

</body>
</html>

insert.php

<?php


$conn = mysqli_connect("localhost", "root", "" ,"aj");

$name = $_POST['user_name'];
$age = $_POST['user_age'];
$course = $_POST['user_course'];




$insertdata=" INSERT INTO test3 (name,age,course) VALUES( '$name','$age','$course' ) ";
mysqli_query($conn,$insertdata);


?>

Answer 1

绑定事件处理程序的 JavaScript 代码执行得太早。 DOM 尚未完全加载，因此无法找到表单。 jQuery 不会对此发出警告。

要么将您的代码包装在 jQuery 的文档加载方法 $(function(){ /* code here */ } ) 中。

Or/and 将您的 JavaScript 移至 HTML 的底部。这是一种优选的方法。有关详细信息，请参阅 Benefits of loading JS at the bottom as opposed to the top of the document

Answer 2

没有错误。从技术上讲，它是正确的。它只是不适合您的用例。
用户提交表单时页面刷新是默认行为。
您有两个选择：

在您的 ajax 调用完成后停止进一步执行。您可以使用 preventDefault 方法通过 javascript 来完成此操作。然后，使用 return false.
将提交按钮更改为普通按钮。换句话说，不要以正常方式提交表单。给普通按钮一个 id 并在点击时调用 javascript 函数。

Answer 3

关闭脚本标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

文档准备好后使用

$( document ).ready(function() {
    var frm = $('#contactForm1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                frm[0].reset();
                alert('ok');
            }
        });

        ev.preventDefault();
    });
});

The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. The ready() method specifies what happens when a ready event occurs.

使用 ajax 提交表单数据时出现问题

Problems in submitting form data using ajax

php

ajax

ajaxform