jQuery获取radio单选框值控制台正常但传到后端Controller总返回0求解

核心错误原因 #

• 生成单选框的DOM操作逻辑错误，value属性没有正确绑定到<input>节点上，文本内容也错误覆盖了原有的DOM结构
• 事件绑定存在重复绑定问题，多次触发点击事件会导致重复提交请求
• 变量作用域不明确，且你在AJAX请求中使用的selectedRateId没有定义赋值，大概率是变量名写错了
• 选择器太宽泛，所有input的变化都会修改你存储的选中ID，容易被页面其他输入框干扰

修正方案 #

1. 修正单选框生成逻辑 #

你之前把attr('value')和text()作用到了包含input、label、br的整个DOM片段上，要拆分节点单独设置属性：

var loadCustomersRate = function () {
    // 挂载到window避免作用域问题，也可以用你自己的全局变量管理方式
    window.currentRateId = 0;
    App.loading.start('#pageBody');
    App.post('/RateChange/CustomerRates?customerId=' + customerId, {}, function (result) {
        if (result.Code == "OK") {
            // 先清空旧列表避免重复追加
            $('#customerRatesList').empty();
            $.each(result.Data, function (key, value) {
                // 单独创建input节点设置属性
                const $radio = $("<input type='radio' class='radioBtnClass' name='radio'>")
                    .attr("value", value.Id);
                // 单独创建label设置文本
                const $label = $("<label></label>").text(value.RateName);
                // 追加到列表
                $('#customerRatesList').append($radio).append($label).append('<br>');
            });
            // 只绑定你新增的单选框的change事件
            $('.radioBtnClass').change(function () {
                window.currentRateId = $(this).val();
                console.log(window.currentRateId);
            });
        } else {
            App.showMessage('error', 'İşlem Başarısız. (' + result.Message + ')', 'Hata');
        }
        App.loading.end('#pageBody');
    }, false);
}

2. 修正提交逻辑，避免重复绑定事件 #

你之前的嵌套绑定会导致每次勾选复选框都给保存按钮多绑一次事件，要把事件绑定拆出来，或者先解绑再绑定：

var updateSingleRate = function () {
    // 先解绑已有事件避免重复绑定
    $('#checkboxBtn').off('click').on('click', function () {
        if ($(this).is(':checked')) {
            alert('Rate will change.');
        }
    });
    $('#saveBtn').off('click').on('click', function () {
        // 提交前直接取选中的单选框值，比提前存变量更稳妥，避免变量异常
        const currentRateId = $('.radioBtnClass:checked').val() || 0;
        if (!$('#checkboxBtn').is(':checked')) return;
        $.ajax({
            url: 'UpdateSingleRate',
            // 注意你之前的selectedRateId是未定义的，确认你要传的参数名和对应值，这里我暂时按同值处理
            data: { customerId: customerId, selectedRate: currentRateId, currentRate: currentRateId },
            success: function (response) { App.showMessage('OK') },
            error: function (response) { App.showMessage('Danger') }
        });
    });
}

额外排查点 #

如果还有问题可以检查后端Controller的参数名是否和你AJAX传的参数完全一致，是否存在大小写不匹配的问题，或者参数类型是否匹配，比如后端要求传int类型，你传的字符串如果无法转成数字也会被赋值为默认值0。

内容的提问来源于stack exchange，提问作者kkami-sama