Php Html表单提交无需重定向，可以'；我不能让AJAX工作

我正在尝试使用AJAX在不刷新页面的情况下提交html表单，但我无法让它正常工作。这是我的表格：

<div id="form">
<form onSubmit="return checkdate(this.datum)" method="post" name="kal_event" id="kal_event" action="add_event.php" >

<fieldset>
    <legend><b><font face="georgia, garamond" size="5" color="#303030">Add event</font></b></legend><br>
    <table>
        <tr>
            <td><label for="header"><b><font face="georgia, garamond" color="#303030">Header:</font></b></label>
            <input type="text" name="header" id="header" class="input" required /><br></td>
            <td><label for="date"><b><font face="georgia, garamond" color="#303030">Date:</font></b></label>
            <input type="text" name="date" id="date" class="input" required /><br></td>
        </tr>
        <tr>
            <td><label for="location"><b><font face="georgia, garamond" color="#303030">Location:</font></b></label>
            <input type="text" name="location" id="location" class="input" required /><br></td>
            <td><label for="time"><b><font face="georgia, garamond" color="#303030">Time:</font></b></label>
            <input type="time" onchange="checktime(this);" name="time" id="time" class="input" required /><br></td>
        </tr>
        <tr>
            <td valign="top"><label for="foodBox"><b><font face="georgia, garamond" color="#303030">Food?</font></b></label>
            <input type="text" name="foodText" id="foodText" class="input" disabled required />  <input type="checkbox" name="foodBox" id="foodBox" /><br>
            <label for="bringBox"><b><font face="georgia, garamond" color="#303030">Good to bring:</font></b></label>
            <input type="text" name="bringText" id="bringText" class="input" disabled required/>  <input type="checkbox" name="bringBox" id="bringBox"/><br></td>
            <td><label for="description"><b><font face="georgia, garamond" color="#303030">Description:</font></b></label>
            <textarea name="description" id="description" class="input" rows="5" cols="25" required></textarea><br></td>
        </tr>
        <tr>

        </tr>
    </table>
</fieldset><br>
<input type="submit" value="Add!" class="button"/>
</form></div>

添加事件

标题：


日期：


地点：


时间：


食物


带上好东西：


说明：

这是我提交的AJAX：

$(document).ready( function () {
    $('kal_event').submit( function () {
        var formdata = $(this).serialize();
        $.ajax({
            type: "POST",
            url: $(this).attr("action"),
            data: formdata,
            success: function() {
                $('#form').html("<div id='message'></div>");
                $('#message').html("<h2>Thanks for adding an event!</h2>")
                .append("<p>We will see you at the event.</p>")
                .hide()
                .fadeIn(1500, function() {
                    $('#message').append("<img id='checkmark' src='onwebmedia/message-512.png' />");
                });
            }
        });
        return false;
    });
});

$（文档）.ready（函数（）{
$（'kal_事件'）。提交（函数（）{
var formdata=$（this.serialize（）；
$.ajax({
类型：“POST”，
url:$（this.attr（“操作”），
数据：formdata，
成功：函数（）{
$（'#form'）.html（“”）；
$（'#message'）.html（“感谢添加事件！”）
.append（“我们将在活动中与您见面。
”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）。追加（“”）；
});
}
});
返回false；
});
});

这是我的add_event.php：

<?php
include_once "db_connect.php";

session_start();

header('Content-type: text/html; charset=utf-8');
ini_set('default_charset', 'UTF-8');

if (isset($_SESSION['login']) && $_SESSION['login'] != ''){
    $header = $_POST['header'];
    $location = $_POST['location'];
    $time = $_POST['time'];
    $date = $_POST['date'];
    $food = $_POST['foodText'];
    $bring = $_POST['bringText'];
    $description = $_POST['description'];

    if($mysqli = connect_db()){
        $sql = 'INSERT INTO `calendar' . $_SESSION['customer'] . '`(`header`, `location`, `date`, `time`, `food`, `bring`, `description`) VALUES ("'. $header .'","'. $location.'","'. $date .'","'. $time . '","'. $food .'","'.  $bring .'","'. $description .'")';
        $result = $mysqli->query($sql);
    }
    echo $result;
}
?>

---

我一直被重定向到add_event.php。请帮帮我

将事件处理程序添加到提交函数中，并将选择器更改为表单id的选择器-

$('#kal_event').submit( function (event) { // changed selector to id here
    event.preventDefault();
    // rest of your AJAX code

页面重定向的原因是您没有在提交选择器中正确地将表单作为目标。由于您最初编写的选择不明确，因此会发生重定向。通过更正选择器（在本例中使用表单的id），问题得到了解决

---

要了解有关

返回false

及其部分的更多信息，下面的帖子提供了一个很好的阅读-

写

$（'kal\u event'）

，而不是

$（'kal\u event'）

$（'kal_event'）

正试图在您的页面上查找

，当您使用jQuery处理提交事件时，为什么要使用

onSubmit=“return checkdate（this.datum）”

。您应该在submit事件句柄中使用适当的参数调用checkdate，您很容易受到该句柄的攻击，并且只需假设插入查询成功即可。