使用jquery重新填充JSON数据的表单 [英] Use jquery to re-populate form with JSON data

问题描述

我有一个HTML表单，通过ajax保存到数据库。为了获得键/值对的查询字符串，我使用了非常方便的 serialize 函数，如下所示：

  var myData = $（form＃form_id）。serialize（）; 
 $ .ajax（{
 url：my_save_script.php，
 type：post，
 data：myData，
 success：function（msg）{ 
 alert（msg）; 
} 
}）; 
  

现在我想加载一个空白表单，并用数据库中的数据重新填充它，这是从ajax调用作为JSON字符串提供的。我已经能够得到一个正确的键/值对这样的Javascript对象：

  data = $ .parseJSON（data ）; 
 data = data [0]; 
  

重新填充表单的最简单，最优雅的方式是什么？

记住表单的输入元素是文本，选择，复选框和广播。输入元素的名称与数据库列的名称相同，并且是上述 data 对象中的键/值对的键。这就是为什么 serialize 函数对我来说工作得很好

解决方案

I 'd说最简单的方法应该是这样：

  //从json对象中重置表单值
 $ .each（data，function（name，val）{
 var $ el = $（'[name =''+ name +']'），
 type = $ el.attr（'type' ）; 
 
 switch（type）{
'checkbox'：
 $ el.attr（'checked'，'checked'）; 
 break; 
 case'radio'：
 $ el.filter（'[value =''+ val +''）'）。attr（'checked'，'checked'）; 
 break; 
默认值：
 $ el.val（val）; 
} 
}）; 
  

基本上，唯一很奇怪的是复选框和收音机，因为它们需要有它们的检查属性，检查。收音机比复选框稍微复杂一些，因为我们不仅需要检查它们，还需要找到合适的一个来检查（使用该值）。其他所有东西（输入，textareas，selectboxes等）应该只将其值设置为JSON对象中返回的值。

jsfiddle： http://jsfiddle.net/2xdkt/

I have an HTML form, that I save to the database via ajax. To get the query string of key/value pairs, I have used the very convenient serialize function, like this:

var myData = $("form#form_id").serialize();
$.ajax({
    url: "my_save_script.php",
    type: "post",
    data: myData,
    success: function(msg){
        alert(msg);
    }
});

Now I want to load a blank form, and re-populate it with the data from the database, which is delivered from an ajax call as a JSON string. I have been able to get a Javascript object with the correct key/value pairs like this:

data = $.parseJSON(data);
data = data[0];

What is the simplest, most elegant way to re-populate the form?

keep in mind the input elements of the form are text, select, checkbox, and radio. The names of the input elements are the same as the names of the database columns, and are the keys of the key/value pairs in the above data object. This is why the serialize function works so well for me

解决方案

I'd say the easiest way would be something along these lines:

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

Basically, the only ones that are odd are the checkboxes and radios because they need to have their checked property, well, checked. The radios are a little more complex than the checkboxes because not only do we need to check them, we need to find the right ONE to check (using the value). Everything else (inputs, textareas, selectboxes, etc.) should just have its value set to the one that's returned in the JSON object.

jsfiddle: http://jsfiddle.net/2xdkt/

这篇关于使用jquery重新填充JSON数据的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！