{ "createBy": "admin", "createTime":"2023-07-12 19:37:00", "updateBy": "null", "updateTime": "2023-07-12 20:11:13", "remark":"null", "id":"16" }将json文件渲染在页面表单
时间: 2023-07-24 12:14:00 浏览: 96
使用json数据生成表单页面
您可以使用JavaScript将JSON数据渲染到HTML表单中。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>渲染JSON到表单</title>
</head>
<body>
<form id="myForm">
<label for="createBy">创建者:</label>
<input type="text" id="createBy" name="createBy"><br><br>
<label for="createTime">创建时间:</label>
<input type="text" id="createTime" name="createTime"><br><br>
<label for="updateBy">更新者:</label>
<input type="text" id="updateBy" name="updateBy"><br><br>
<label for="updateTime">更新时间:</label>
<input type="text" id="updateTime" name="updateTime"><br><br>
<label for="remark">备注:</label>
<input type="text" id="remark" name="remark"><br><br>
<label for="id">ID:</label>
<input type="text" id="id" name="id"><br><br>
<input type="submit" value="提交">
</form>
<script>
var jsonData = {
"createBy": "admin",
"createTime": "2023-07-12 19:37:00",
"updateBy": null,
"updateTime": "2023-07-12 20:11:13",
"remark": null,
"id": "16"
};
// 将JSON数据填充到表单
document.getElementById("createBy").value = jsonData.createBy;
document.getElementById("createTime").value = jsonData.createTime;
document.getElementById("updateBy").value = jsonData.updateBy;
document.getElementById("updateTime").value = jsonData.updateTime;
document.getElementById("remark").value = jsonData.remark;
document.getElementById("id").value = jsonData.id;
// 处理表单提交
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 在这里添加处理表单提交的逻辑
});
</script>
</body>
</html>
```
您可以将此HTML代码复制到一个HTML文件中,然后在浏览器中打开该文件。表单将根据JSON数据填充输入框。您可以在表单中进行修改和提交。请注意,在示例中,提交表单的动作仍然需要您自己添加处理逻辑。
阅读全文