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

关闭脚本标记

<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();
    });
});

当DOM（文档对象模型）出现时，就会发生就绪事件加载。因为此事件在文档准备好后发生，所以它是一个拥有所有其他jQuery事件和函数的好地方。就像在上面的例子。 ready（）方法指定准备好后会发生什么事件发生。

Answer 2

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

将你的代码包装在jQuery的doc加载方法$(function(){ /* code here */ } )上。

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

Answer 3

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

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

使用ajax提交表单数据的问题

3 个答案: