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

sendForm .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
    });
});

您可以參考文檔以獲取更多信息。