如何通过字段名数组批量赋值AJAX返回的JSON数据到Laravel表单？

使用Laravel框架展示包含多个输入字段的表单，字段值从数据库获取。通过jQuery的AJAX请求获取JSON数据后，希望遍历字段名数组批量赋值表单字段，而非逐个手动赋值。现有代码尝试循环字段数组，但result.fields[i]无法生效，手动指定result.name等方式可行，求批量赋值的实现方法。

现有代码：

var url = "/myurl_goes_here/?api_token=my_token_goes_here";
var fields = ['name','age','color','size']; //可能会有20-30个字段

$.ajax({url: url, success: function(result){
    for(i=0;i<fields.length;i++){
        var thisField = document.getElementById(fields[i]);

        /* 
           想要实现基于数组值批量赋值字段
           字段的name和id等于数组元素，尝试设置值为result.xxxx，其中xxxx是数组元素的值
        */

        thisField.value = result.fields[i]; //---- 无法生效

        //像下面这样手动指定是可行的：
        thisField.value = result.name;
        thisField.value = result.age;
        //... 要重复20-30次？每个字段写一行？ ...//
    }
}

解决方案 #

问题出在对象属性的访问方式上：result.fields[i]是在尝试访问result对象里名为fields的属性，但你的result返回的JSON数据里并没有这个fields数组，而是直接包含name、age等字段属性。

要通过变量动态访问对象属性，需要用方括号语法，而不是点语法。把result.fields[i]改成result[fields[i]]即可实现批量赋值：

var url = "/myurl_goes_here/?api_token=my_token_goes_here";
var fields = ['name','age','color','size'];

$.ajax({
    url: url,
    success: function(result){
        // 用let代替var，避免全局变量污染
        for(let i = 0; i < fields.length; i++){
            const fieldName = fields[i];
            const thisField = document.getElementById(fieldName);
            // 先判断字段存在，避免报错
            if(thisField){
                thisField.value = result[fieldName];
            }
        }
    }
});

补充优化点 #

• 避免全局变量：用let/const代替var声明循环变量i，防止变量泄漏到全局作用域。
• 字段存在性校验：增加if(thisField)判断，避免DOM元素不存在时抛出错误。
• jQuery简化写法：如果已经在用jQuery，可以直接用$('#' + fieldName)替代原生DOM获取，写法更简洁：

// 简化后的DOM获取写法
const thisField = $('#' + fieldName);
if(thisField.length){
    thisField.val(result[fieldName]);
}

内容的提问来源于stack exchange，提问作者Joey R.