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

标签 javascript jquery ajax forms submit

我以前从未使用过 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 头部

最佳答案

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

关于javascript - 使用 AJAX 提交表单不起作用。它忽略了ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40010140/

相关文章:

jquery - dataLayer.push() 不会触发 HTTP 请求

javascript - 使用 jquery 向非 native 服务器发送授权 header 时出错

javascript - 在 ReactJS 中调用函数嵌套状态对象

javascript - 如何在 react-redux 中调度 .then()

php - 我怎样才能像 WordPress 帖子列表编辑链接那样实现悬停效果的 jQuery?

jquery - 使用 Jquery 更新 Azure 网页

javascript - 使用 JavaScript 提交 Ajax.BeginForm()

javascript - 如何更改ajax成功回调中的日期格式

javascript - 错误Js无法读取null的 'setAttribute'属性

javascript - jquery匹配特殊字符时的事件按键事件