Question

后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)

我现在在前台的JS中能接收到从后台服务器程序传来的JSON数据(原数据是有5、6个字段的很多条数据记录)，怎么在前台的表单中显示这些数据，并且能对显示的数据再做操作，比如编辑、删除等，我的前台页面没有用JSP、ASP、PHP，就是HTML+JS/Jquery，请问代码怎么写？

效果如图。

Answer 1

你前台必须先有一个模板来接受数据,这个模板可以是你自定义的,假设你的数据对象是

data = [{"name":"张三", "age":"21"},{"name":"李四", "age":"21"},{"name":"王五", "age":"21"}]

前台模板为

<div id="muban">
  <ul id="ml">
  </ul>
</div>

数据操作为

for(var i = 0;i < data.length;i++){
    var a = "<li>姓名：" + data[i].name + ",年龄: "+ data[i].age +"</li>";
    var $ul = document.getElementById("ml");
    $ul.append(a);
}

Answer 2

后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)你前台必须先有一个模板来接受