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

【问题标题】：jQuery how to load some json records into a form fields?jQuery如何将一些json记录加载到表单字段中？
【发布时间】：2011-04-09 11:27:03
【问题描述】：

我有一个 json 文件：

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

还有一个表格：

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

我想知道将多个 json 记录加载到多个表单元素中的正确 sintax 是什么？类似于您想要修改的表单之类的东西，并且值会被奇怪地放入这些字段中

我知道我可以使用：

$getJSON('link_to_json_file' function() {

});

但我被困在这里谢谢

【问题讨论】：

【解决方案1】：

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

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

你可以这样做：

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

【讨论】：

$.each(data, function(key, val) { }); 而不是for 会更好
为什么会更好？我见过的基准测试表明，使用本机 for 循环遍历更快，尤其是对于大型对象。
好吧，可能会快一点，但是 each 语法看起来像一个普通的迭代器，与原生 for 相比，有一些像 data[i] 这样的东西，如果你不使用非常大的对象我认为你应该使用each
虽然 OP 的示例使用输入，但应注意提供的代码不会命中 textareas。我会将其更改为 $('.form-class *[name="'+i+'"]').val(data[i]); - 其中 .form-class 是您要定位的表单。

【解决方案2】：

您能看看http://code.google.com/p/jquery-load-json/ 上的JQuery loadJSON 插件吗？在页面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 下载插件。

【讨论】：

【解决方案3】：

你也可以像下面这样使用 $.get;

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

【讨论】：

【解决方案4】：

那么，$.getJSON 有什么问题？它工作正常：

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

【讨论】：