如何使用JSON填写表单？

Question

我得到ajax响应为JSON,需要用它填充表单.如何在jQuery或其他东西中做到这一点？有什么比使用更好的东西$(json).each()？

JSON:

{ 
  "id" : 12,
  "name": "Jack",
  "description": "Description"
}

填写表格

<form>
  <input type="text" name="id"/>
  <input type="text" name="name"/>
  <input type="text" name="description"/>
</form>

Answer 1

来这里寻找一个不涉及 jQuery 或 DOM 扫描早午餐的解决方案，但没有找到......所以这是我的普通 js 解决方案，为其他可能很久以前就放弃了 jQuery 的人带来了。

const data = { 
  "id" : 12,
  "name": "Jack",
  "description": "Description",
  "nonExisting": "works too"
}

const { elements } = document.querySelector('form')

for (const [ key, value ] of Object.entries(data) ) {
  const field = elements.namedItem(key)
  field && (field.value = value)
}

<form>
  <input type="text" name="id"/>
  <input type="text" name="name"/>
  <input type="text" name="description"/>
</form>

Answer 2

var json={ 
  "id" : 12,
  "name": "Jack",
  "description": "Description"
};
for(key in json)
{
  if(json.hasOwnProperty(key))
    $('input[name='+key+']').val(json[key]);
}

srry我认为这是设置的id属性.

这里:http://jsfiddle.net/anilkamath87/XspdN/

Answer 3

假设data是JSON对象,您可以在$.getJSON回调中使用它:

var $inputs = $('form input');
$.each(data, function(key, value) {
  $inputs.filter(function() {
    return key == this.name;
  }).val(value);
});

Answer 4

您可能想看一下jQuery Populate 插件。

尽管如果这是您唯一的用例，您也可以手动执行。