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

时间:2016-10-12 23:52:35

标签: javascript jquery ajax forms submit

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

它只是重定向到ajax_submit.php,好像js文件不存在一样。我试图使用Ajax来获取ajax_submit而不重新加载任何内容。

我正在尝试做甚么可能吗?

HTML表单:

PI

在scripts.js文件中:

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

在ajax_submit.php中:

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

我有“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 } ” 在html头

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

你的ajax电话工作正常。您的代码几乎没有概念错误 -

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

  2. 如果您要清除表单,可以使用类似的方式进行操作

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

    1. 最后完成你的任务&amp;使用echoecho 'successful'之类的echo failed向ajax调用返回成功或失败的值等。在您的代码中使用else条件。你会更清楚。

答案 2 :(得分:-3)

从表单中删除“action”和“method”属性。你不应该需要它们。