Используйте jquery для повторного заполнения формы данными JSON - PullRequest
Новая
       24

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

21 голосов
/ 21 марта 2012

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

Ответы [ 3 ]

54 голосов
/ 21 марта 2012

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

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

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

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

0 голосов
/ 21 марта 2012

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

$.post("my_save_script.php", {
         data: myData,
    }, function(data) {
        $.each(data, function(i, item){
            $("#"+item.field).val(item.value);
        });      
    }, 
"json");
0 голосов
/ 21 марта 2012

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

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

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

Тогда что-то вроде этого для выбора: 

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

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

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

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

Переключателю может потребоваться дополнительная работа в зависимости от того, как вы различаете разные.(IE Id, значение и т. Д.)

...