javascript - jQuery:$.ajax() 重定向到其 URL 表单操作参数，而不是对表单操作执行 AJAX 请求

Question

在解释我的问题之前，我会先展示我的代码。

这是我的表格:

<form id="update-sale-form" method="POST" action="actions/updatesale.php">
<table id="update-sale-table" class="table borderless">
    <tr>
        <td><label>Item Code</label></td>
        <td id="item-code"></td>
    </tr>
    <tr>
        <td><label>On Sale?</label></td>
        <td>
            <input type="hidden" id="itemcode" name="item-code" value="" />
            <select id="is-sale" class="form-control" name="is-on-sale" onchange="checkSale(this.value)">
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Percentage</label></td>
        <td>
            <div class="input-group">
                <input type="text" id="sale-percentage" class="form-control input-sm" name="sale-percentage" onkeypress="return isNumberKey(event)" maxlength="2"/>
                <span class="input-group-addon">%</span>
            </div>
        </td>
    </tr>
</table>
<div class="response"></div>
</form>
<script type="text/javascript">
function disableSalePercentage(){
    $('#sale-percentage').prop('disabled', true);
    $('#sale-percentage').val('0');
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function checkSale(value){
    if(value=='0'){
        disableSalePercentage();
    } else {
        $('#sale-percentage').prop('disabled', false);
        $('#sale-percentage').val('');
    }
}

这是我处理请求的 PHP 文件。

<?php
session_start();
require '../config/consettings.php';

$itemCode = $_POST['item-code'];
$isSale = $_POST['is-on-sale'];
$salePercent;

if($isSale==1){
    if(empty($_POST['sale-percentage']) OR ($_POST['sale-percentage']==00)){
        echo "Please provide valid percentage value.";
        return;
    } else $salePercent = $_POST['sale-percentage'];
} else $salePercent = 0;

$stringQuery = "UPDATE vc_products SET issale='$isSale', salepercent='$salePercent' WHERE code='$itemCode'";
$updateQuery = mysqli_query($connection, $stringQuery);
if($updateQuery) echo "good-query";
else echo mysqli_error($connection);
?>

下面是处理 AJAX 请求的 JavaScript:

$("#products-table").on('click', 'span.sale-toggle', function(){
    var itemCode = $(this).attr('itemcode');
    var isSale = $(this).attr('issale');
    var salePercent = $(this).attr('percent');

    BootstrapDialog.show({
        title: '<span class="glyphicon glyphicon-edit"></span> Editing Sale Information.',
        message: $('<div></div>').load('forms/updatesale.php'),
        cssClass: 'edit-sale-modal',
        onshow:function(){
            //Do nothing.
        },
        onshown:function(){
            $('#update-sale-table td#item-code').html(itemCode);
            $('#update-sale-table input#itemcode').val(itemCode);
            if(isSale == 'true'){
                $('#update-sale-table select#is-sale').val('1');
                $('#update-sale-table input#sale-percentage').val(salePercent);
            } else {
                $('#update-sale-table select#is-sale').val('0');
                disableSalePercentage();
            }
        },
        buttons:[{
            label: '<span class="glyphicon glyphicon-remove"></span>',
            cssClass: 'btn-danger',
            action: function(dialog){
                dialog.close();
            }
        }, {
            label: '<span class="glyphicon glyphicon-ok"></span>',
            cssClass: 'btn-primary',
            hotkey: 13,
            action: function(dialog){
                var actionPath = $('form#update-sale-form').attr('action');
                var formData = $('form#update-sale-form').serialize();

                $.ajax({
                    url: actionPath,
                    type: 'POST',
                    data: formData,
                    beforeSend: function(){
                        //Do nothing.
                    },
                    success:function(actionResponse){
                        var response = actionResponse.trim();

                        if(response=='good-query'){
                            dialog.close();
                            BootstrapDialog.show({
                                title: '<span class="glyphicon glyphicon-ok"></span> Sale Record Updated.',
                                message: 'Sale record successfully changed.',
                                cssClass: 'sale-change-successfull',
                                buttons: [{
                                    label: '<span class="glyphicon glyphicon-ok"></span>',
                                    cssClass: 'btn-success',
                                    hotkey: 13,
                                    action: function(dialog){
                                        dialog.close();
                                    }
                                }]
                            });
                        } else {
                            var message = "<div class='alert alert-danger'>"+response+"</div>";
                            $('.response').html(message);
                        }
                    }
                });
            }
        }]
    });
});

我真的需要帮助。我的问题是，我的 jQuery AJAX 函数“重定向”到“表单操作”url，而不是执行 AJAX 并返回结果。在我的 Bootstrap 对话框中，表单已加载，它有一个按钮，用于监听按下回车键的事件，它工作正常，但如果百分比字段获得焦点并且按下回车键，则页面重定向到表单操作，并且不执行ajax调用。没有显示错误，因此我无法解决错误，但如果单击模式框上的复选按钮，则一切正常。它仅在我输入百分比值并按 Enter 键时重定向，这是大多数最终用户通常所做的。我真的需要一些帮助。请给我一点时间并检查我的 $.ajax() 调用出了什么问题，我真的认为它有问题，但我就是无法弄清楚。拜托，我需要一些帮助。

Answer 1

在输入字段中按 Enter 键会触发表单的提交事件。因此，您需要做的是将处理程序附加到该事件，而不是按钮的单击事件。

当用户单击提交按钮或在表单中的任何输入字段上按回车键时，这两种情况都会捕获。

$(function() {
    $("#update-sale-form").on("submit", function(event) {
        event.preventDefault();
        var form = $(event.target);

        var actionPath = form.attr("action");
        var formData = form.serialize();

        // --------------------------
        // Insert your ajax code here
        // --------------------------

        return false;
    });
});

您还需要更改“确定”按钮的操作以在表单上执行提交

action: function(dialog) {
    $("#update-sale-form").submit();   
}

<小时/>

奖金信息

当通过 ID 查找 html 元素时，使用包含祖先详细信息的长选择器没有任何好处。

$("#itemcode")

不仅更容易阅读，而且速度更快

$("#update-sale-table input#itemcode")

每当需要通过 ID 查找元素时，jquery 都会使用浏览器的 native document.getElementById('...') 函数，该函数速度非常快。然而，当在选择器中包含祖先详细信息时，jquery 必须验证找到的元素实际上是否具有正确的祖先元素。如果您仅在选择器中使用 ID，则可以完全跳过该步骤。