php - 防止使用 jQuery 进行 Ajax 时的默认操作

Question

我试图阻止使用ajax提交表单时的默认操作，但我相信我的代码错误，因为页面似乎进行了“刷新”并且表单被清除，但没有任何内容发送到数据库。我尝试在表单的“操作”部分中添加指向 php 处理脚本的链接，它确实可以很好地提交到数据库，因此问题似乎出在我的 jQuery 代码上。

    <script type="text/javascript">
$(document).ready(function(e){
        e.preventDefault();
    $("#rpack_add_form").validate({
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $("#rpack_add_form").serialize(), function(data) {
                $('#ajaxResult').html(data);
            });
        }
    });
});
</script>

我的表单代码:

<div id="rpacks_admin" style="display: none;">
<h5>Add A New Recovery Pack</h5>
    <form id="rpack_add_form" class='small_form' name='rpack_add_form' action='' method='post'>
        Contract:
        <select id="contract_select" name="contract" onchange="showContract(this)">
            <option value='0'>Select Contract</option>
                <?php 
                $sth = $conn->query("SELECT * FROM `contracts`");
                while($row = $sth->fetch(PDO::FETCH_ASSOC))
                {
                    echo '<option value='.$row['contracts_id'].'>'.$row['contracts_name'].'</option>';
                }
                ?>
        </select>
            <div id="contract1" class="admin_box">
                Prefix: <input name='prefix' type='text' id='prefix'><br />
                Number: <input name='number' type='text' id='number'><br />
                Suffix: <input name='suffix' type='text' id='suffix'><br />
            </div>
            <div id="contract2" class="admin_box">
                <p>Sapce for content</p>
            </div>
            <div id="contract3" class="admin_box">
                <p>Sapce for contentrm</p>
            </div>
        Received:
            <select id="select_receive" name="received" onchange="showLocation(this)">
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select><br />
        <div id="location_box" style="display: none; padding-top: 5px;">Location: <input name='location' type='text' id='location'></div>
        <input class='button' type=submit value='Add' name='add_rpack'>            
    </form>
<a class='hide_div' href='javascript:void(0);' onclick='hideRdiscDiv()'>Close</a>

如果需要的话还有我的 PHP

            <?php
            session_start();
            include_once 'config.php';
            include_once 'connect.php';
            include_once 'bcrypt.php';
            $prefix = $_POST['prefix'];
            $number = $_POST['number'];
            $suffix = $_POST['suffix'];
            $contract = $_POST['contract'];
            $received = $_POST['received'];
            $location = $_POST['location'];

            //Check if password and username has been submitted then add to DB
            if (empty ($number))
            {
                echo "You need to enter a recovery pack number";
            }else
            {
                $sth = "INSERT INTO `rpacks` (rpacks_prefix, rpacks_number, rpacks_suffix, rpacks_contract, rpacks_receive, rpacks_location) VALUES (:prefix, :number, :suffix, :contract, :received, :location)";
                $q = $conn->prepare($sth);
                $q->execute(array(':prefix'=>$prefix,':number'=>$number,':suffix'=>$suffix,':contract'=>$contract, ':received'=>$received, ':location'=>$location));
                echo "Added";
            }

Answer 1

.validate() 对象有一个 sendForm 参数。默认设置为true，但您需要将其设置为false，如下面的代码所示，以防止表单被提交:

$(document).ready(function () {
    $('#rpack_add_form').validate({
        submitHandler: function (form) {
            // do other stuff for a valid form
            $.post('<?php echo BASE_URL?>/core/addrpack.php.php', $('#rpack_add_form').serialize(), function (data) {
                $('#ajaxResult').html(data);
            });
        },
        sendForm: false
    });
});

您可以reference the docs了解更多信息。