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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)相关的知识,希望对你有一定的参考价值。

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

效果如图。

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

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);

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

以上是关于后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)的主要内容,如果未能解决你的问题,请参考以下文章

java中easyui怎么做树?数据已传回,就是生成不了树,只显示undefined,各位大大求解.

JSP 后台可以传回数字,怎样让前台表格显示数字对应的文字?

ajax前台提交数据,Json数据在java后台怎么取出来

form 表单提交时能不能附带json数据

怎么把json数据输出到HTML的表单中?

ajax后台传回结果和数据