Question

我正在尝试使用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;
    });
});

这是我的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。请帮帮我！

Answer 1

向您的提交函数添加一个事件处理程序，并将选择器更改为窗体的id -

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

您的网页重定向的原因是您没有在提交选择器中正确定位表单。由于您最初编写的选择不明确，因此重定向发生。通过更正选择器，在这种情况下使用表单的id，问题是固定的。

要详细了解return false及其各个部分，请仔细阅读以下文章 - event.preventDefault() vs. return false

没有重定向的Html表单提交，无法使AJAX工作

1 个答案: