jQuery如何将一些JSON记录加载到表单字段中？

Question

i have a json file:

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

还有一个表单：

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

我希望您能够翻译关于IT技术的内容。需要翻译的内容是：我想知道将多个JSON记录加载到多个表单元素中的正确语法是什么？就像一个表单，您想要修改并将值查询到这些字段中。

我知道可以使用以下方式：

$getJSON('link_to_json_file' function() {

});

但我卡在这里了，谢谢。

- Patrioticcow

Answer 1

或者，如果您的数据返回是字段名值对，例如：

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

你可以这样做：

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

- wwd

---

使用 $.each(data, function(key, val) { }); 而不是 for 会更好。 （注：该句话本身已经是中文，因此直接翻译即可。） - Vasiliy Ermolovich

为什么会更好？我看到的基准测试结果显示，使用原生的for循环遍历对象速度更快，特别是在处理大对象时。 - wwd

好的，也许它会快一点，但是与使用data[i]等内容的原生for相比，each语法看起来更像一个普通的迭代器。如果您没有使用非常大的对象，我认为您应该使用each。 - Vasiliy Ermolovich

虽然 OP 的示例使用了输入，但应注意到提供的代码不会命中文本区域。我建议将其更改为 $('.form-class *[name="'+i+'"]').val(data[i]); - 其中 .form-class 是您想要定位的表单。 - David Bradbury

Answer 2

你能否看一下JQuery loadJSON插件的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下载插件。

- Jovan MSFT

Answer 3

您也可以像下面这样使用 $.get；

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

- thecodeparadox

Answer 4

那么，$.getJSON有什么问题吗？它运行良好：

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

- Vasiliy Ermolovich

---

是的，那个可以用，但我在寻找更短的代码版本，因为我可能有20个输入框。 - Patrioticcow