jQuery, как загрузить некоторые записи JSON в поля формы?

Question

У меня есть файл JSON:

 {
    "data": "Click",
    "size": "Here"    }

и форма:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form> 

Мне было интересно, каков правильный синтаксис для загрузки нескольких записей JSON в несколько элементов формы? Что-то вроде формы, которую вы хотите изменить, и значения будут помещены в эти поля

я знаю, что могу использовать:

$getJSON('link_to_json_file' function() {

});

но я застрял здесь спасибо

Answer 1

Или, если ваши данные возвращаются как пары значений полей, например:

{"firstname" : "John", "lastname" : "Doe"}

Вы можете сделать это следующим образом:

$.getJSON('url_to_file', function(data) {
    for (var i in data) {
        $('input[name="'+i+'"]').val(data[i]);
    }
});

Answer 2

Не могли бы вы взглянуть на плагин loadJSON JQuery на http://code.google.com/p/jquery-load-json/? На странице http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements объясняется, как этот плагин загружает объект JSON в форму. Вы также можете найти один живой пример здесь http://jquery -load-json.googlecode.com / svn / trunk / edit.html? ID = 17 . Я думаю, что это именно то, что вам нужно. Просто создайте пустую форму и загрузите json в форму, используя следующий код:

$('form').loadJSON(data);

Этот плагин обрабатывает все элементы формы, такие как флажки, переключатели выбора списка и т. Д. Если вы используете его, вам нужно будет загрузить плагин из http://code.google.com/p/jquery-load-json/source/browse/trunk/scripts/jquery.loadJSON.js.

Answer 3

Вы также можете использовать $ .get, как показано ниже;

$.get('your_file.[php/json]',function(d){
    $("input[name='firstname']").val(d.data);
    $("input[name='firstname']").val(d.size);
},'json');

Answer 4

Итак, что не так с $.getJSON?Работает нормально:

$.getJSON("1.json", function(data) {
  $('input[name="firstname"]').val(data["data"]);
  $('input[name="lastname"]').val(data["size"]);
});