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

【问题标题】：Problems in submitting form data using ajax使用ajax提交表单数据的问题
【发布时间】：2016-08-12 05:37:41
【问题描述】：

我是 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>

插入.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);


?>

【问题讨论】：

在ev.preventDefault();之后添加return false;
首先把你的整个js代码放到$(document).ready(function(){...});然后让我们知道是否有任何问题？
我已经添加了这个。但结果是一样的。没有变化。
检查控制台是否有任何错误？
添加 $(document).ready(function(){...}); 后问题解决了.而且我忘记关闭

标签： php ajax ajaxform

【解决方案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（文档对象模型）已经完成时，ready 事件发生加载。因为这个事件是在文档准备好之后发生的，所以它是一个拥有所有其他 jQuery 事件和功能的好地方。就像在上面的例子。 ready() 方法指定准备就绪时会发生什么事件发生。

【讨论】：

感谢@Aman Rawat。这是工作。现在如果我想用这个添加图像上传和 CRUD 操作，请你给我任何建议。
当我提交比数据插入数据库但字段不明确。那么你能帮助如何清除提交的字段值吗？
成功时使用frm[0].reset();

【解决方案2】：

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

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

或者/和将你的 JavaScript 移动到 HTML 的底部。这是一种优选的方法。详情请见Benefits of loading JS at the bottom as opposed to the top of the document

【讨论】：

我为您添加了两个解决方案。在移动设备上编写代码很难；-p

【解决方案3】：

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

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

【讨论】：