Laravel中AJAX返回值正常但jQuery val()无法填充input的问题解决

问题根源 #

后端返回的JSON结构里，title、slug、description都嵌套在category对象下，你用$.each()遍历整个data对象时，会循环到两个元素：category（对象）和editRoute（字符串）：

• 第一次循环处理category时，输入框确实会被填充正确值
• 第二次循环处理editRoute时，value是字符串，value.title为undefined，会把输入框的值清空，最终导致看起来填充失败

另外还有一个小错误：表单的提交属性是action而非actions，原代码里的attr('actions')无法正确设置表单提交地址。

修复代码 #

修改前端AJAX回调逻辑，直接访问data.category的属性，去掉不必要的$.each循环：

$(document).on("click", '#edit', function () {
    var userURL = $(this).data('url');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.get(userURL, function (data) {
        $('#staticBackdrop').modal('show');
        
        // 直接从data.category中取值填充输入框
        $('#title').val(data.category.title);
        $('#slug').val(data.category.slug);
        $('#description').val(data.category.description);
        
        // 修正表单action属性的拼写错误
        $('#edit_forms').attr('action', data.editRoute);
    })
});

可选优化方案 #

如果想保留遍历逻辑以适配更多字段，可以只遍历data.category对象，同时匹配id与属性名一致的输入框：

$(document).on("click", '#edit', function () {
    var userURL = $(this).data('url');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $.get(userURL, function (data) {
        $('#staticBackdrop').modal('show');
        
        // 仅遍历category对象下的属性
        $.each(data.category, function(key, value) {
            // 只对存在的输入框赋值
            if ($('#' + key).length) {
                $('#' + key).val(value);
            }
        });
        
        $('#edit_forms').attr('action', data.editRoute);
    })
});

内容的提问来源于stack exchange，提问作者Aaron