Использовать jquery для повторного заполнения формы с помощью данных JSON

У меня есть 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 работает так хорошо для меня

Ответ 1

Я бы сказал, что самым простым способом было бы что-то в этом роде:

// 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);
    }
});

В принципе, единственными, которые являются нечетными, являются флажки и радиоприемники, потому что они должны иметь свое проверенное свойство, ну, проверено. Радиостанции немного сложнее, чем флажки, потому что нам не только нужно их проверять, мы должны найти правильный ONE для проверки (используя значение). Все остальное (входы, текстовые поля, выборки и т.д.) Должно иметь только значение, установленное для объекта, возвращаемого в объекте JSON.

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

Ответ 2

Если данные [0] содержат имя поля, а данные [1] содержат значение, вы можете сделать следующее:

Вы можете сделать что-то подобное для текстовых полей:

$("[name="+data[0]+"]").val(data[1]);

Затем что-то вроде этого выбирает:

$("[name="+data[0]+"]").val(data[1]);

Обратите внимание, что флажки и переключатели только сериализованы, если они отмечены.

Итак, что-то вроде этого для флажков (до jQuery 1.6 +):

$("[name="+data[0]+"]").attr('checked','checked');

Радиокнопку может потребоваться дополнительная работа в зависимости от того, как вы различаете разные. (I.E. Id, значение и т.д.)

Ответ 3

Я предлагаю вам изменить способ создания запроса ajax. Используйте .post()

$.post("my_save_script.php", {
         data: myData,
    }, function(data) {
        $.each(data, function(i, item){
            $("#"+item.field).val(item.value);
        });      
    }, 
"json");