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


jQuery: $.ajax() redirects to its URL form action parameter instead of performing AJAX request to the form action

在解释我的问题之前,我将首先展示我的代码。

这是我的表格:

<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函数正在"重定向"到"表单操作"网址,而不是执行AJAX并返回结果。在我的引导对话框中,表单已加载,它有一个按钮,用于侦听按下 Enter 键的事件并且工作正常,但如果百分比字段聚焦并且点击 Enter 键,页面重定向到表单操作并且不执行 ajax 调用。没有显示错误,所以我无法解决错误,但如果单击模态框上的检查按钮,一切正常。它仅在我输入百分比值并按 Enter 时重定向,这是大多数最终用户通常做的。我真的需要一些帮助。请给我一点时间,检查一下我的$.ajax()电话有什么问题,我真的认为它有问题,但我就是想不通。拜托,我需要一些帮助。

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

当用户单击提交按钮或按表单中任何输入字段的回车键时,这将捕获两者。

$(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都会使用浏览器的本机document.getElementById('...')函数,该函数非常快。但是,当在选择器中包含祖先详细信息时,jquery 必须验证找到的元素是否确实具有正确的祖先元素。如果您只使用选择器中的 ID,则可以完全跳过此步骤。