使用 AJAX 提交表单不起作用。它忽略了ajax

Question

我以前从未使用过 Ajax，但从研究和其他帖子来看，它看起来应该能够运行表单提交代码而无需重新加载页面，但它似乎不起作用。

它只是重定向到 ajax_submit.php，就好像 js 文件不存在一样。我试图使用 Ajax 在不重新加载任何内容的情况下访问 ajax_submit。

我正在尝试做的事情可能吗？

HTML 表单：

<form class="ajax_form" action="ajax_submit.php" method="post">
<input class="input" id="license" type="text" name="license" placeholder="License" value="<?php echo htmlentities($person['license1']); ?>" />
<input class="input" id="license_number" type="text" name="license_number" placeholder="License number" value="<?php echo htmlentities($person['license_number1']); ?>" />

<input type="submit" class="form_button" name="submit_license1" value="Save"/>
<input type="submit" class="form_button" name="clear1" value="Clear"/>
</form>

在 scripts.js 文件中：

$(document).ready(function(){
$('.ajax_form').submit(function (event) {
    alert('ok');
    event.preventDefault();
    var form = $(this);
    $.ajax({
        type: "POST",
        url: "ajax_submit.php",//form.attr('action'),
        data: form.serialize(),
        success: function (data) {alert('ok');}
    });
});
});

在 ajax_submit.php 中：

require_once("functions.php");
require_once("session.php");
include("open_db.php");

if(isset($_POST["submit_license1"])){
    //query to insert
}elseif(isset($_POST['clear1'])) {
    //query to delete
}

我有“<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>” 在html头中

Answer 1

form.serialize() 不知道提交表单时使用了哪个按钮，因此它不能在结果中包含任何按钮。所以当 PHP 脚本检查 $_POST 中设置了哪个提交按钮时，它们都不匹配。

不要对submit 事件使用处理程序，而是对按钮使用单击处理程序，并将按钮的名称和值添加到data 参数。

$(":submit").click(function(event) {
    alert('ok');
    event.preventDefault();
    var form = $(this.form);
    $.ajax({
        type: "POST",
        url: "ajax_submit.php",//form.attr('action'),
        data: form.serialize() + '&' + this.name + '=' + this.value,
        success: function (data) {alert('ok');}
    });
});

Answer 2

您的 ajax 调用运行良好。您的代码几乎没有概念错误 -

1. form.serialize() 不会附加提交按钮的信息。

2. 如果您想清除表单，可以使用类似这样的方法来完成

$('#resetForm').click(function(){ $('.ajax_form')[0].reset(); });

1. 最后完成您的任务并使用echo（如echo 'successful' 或echo failed 等）将成功或失败值返回给ajax 调用。在您的代码中使用else 条件。你会更清楚。

Answer 3

从表单中删除“动作”和“方法”属性。你不应该需要它们。