Jquery加载JSON，更新表单字段

Posted 2023-05-09

【中文标题】Jquery加载JSON，更新表单字段

【英文标题】：Jquery load JSON, update form fields

【发布时间】：2016-12-19 13:05:21

【问题描述】：

我目前正在使用以下内容加载一些 JSON 数据，然后将 JSON 名称与表单字段名称匹配并更新表单值。

data: 'id': id,
      url: 'load.php',
      success: function(data) 
        for (var i in data) 
            $('input[name="'+i+'"]').val(data[i]);
            
         

load.php 以 json 格式的数据返回特定 ID 的结果。

这有效并且正在更新我的表单input 字段，没有问题。

我遇到的问题是选择选项并选择正确的选项以及复选框并设置正确的状态。

有没有办法循环遍历 JSON 数据并让它更新每个表单字段，无论是输入、复选框还是正确选择？

谢谢

【参考方案1】：

您可以决定对元素 type 执行的操作。 select 和 input 应该可以与 .val() 一起正常工作。对于复选框，您需要prop 来检查它们。

success: function(data) 
    for (var i in data) 
        var element = $('input[name="'+i+'"]');

        if( element.is("[type=checkbox]") ) 
            element.prop("checked", data[i]); // maybe adjust your select decision here
                                              // I don't know your JSON
        
        else 
            element.val(data[i]);
        
    
 

【参考方案2】：

最好的解决方案是 - 在您的 json 响应中添加另一个键。例如说 - 我们添加了 fieldType

//sample json response
[ 
 fieldType: 'checkbox',
 name: 'zyx',
 value: 12
]

JS代码：

success: function(data) 
 var response = jQuery.parseJSON(data);
 _.each(response, function(key, field, context)
   switch(field.fieldType)
    case 'select':
       $('select["name='+ field.name +'"]').val(field.value);
      break;
    default: //input type text
       $('["name='+ field.name +'"]').val(field.value);
      break;
      
   
 );