使用json值的数组封装数据html源代码资源-CSDN文库

共2个文件

js：1个

html：1个

1星需积分: 16 95 浏览量 2015-11-13 22:45:41 上传评论收藏 5KB RAR 举报

在IT行业中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集，易于人阅读和编写，同时也易于机器解析和生成。JSON格式被广泛用于前后端数据交互，尤其是在Web开发中。这个“使用json值的数组封装数据 html 源代码”示例，主要展示了如何在HTML页面中处理和展示由JSON数组封装的数据。在描述中提到的“增加删除查询”的简单例子，意味着这个例子可能包含了一些基本的CRUD（Create、Read、Update、Delete）操作，这些都是数据库操作的基本功能。在这个场景下，JSON数组可以用于存储和传递这些操作涉及的数据。 1. **JSON数据结构**： JSON数据以键值对的形式存在，数据结构类似JavaScript的对象，但不支持函数。例如，一个简单的JSON数组可能如下所示： ```json [ {"id": 1, "name": "Item1", "description": "First item"}, {"id": 2, "name": "Item2", "description": "Second item"} ] ``` 这个数组包含两个对象，每个对象都有"id"、"name"和"description"三个键，对应的值分别是它们的值。 2. **HTML与JSON结合**：在HTML中，我们通常使用JavaScript来处理JSON数据。通过`JSON.parse()`方法，我们可以将接收到的JSON字符串转换为JavaScript对象，然后遍历数组，动态创建DOM元素来展示数据。例如，创建一个列表显示上述JSON数据： ```javascript var data = JSON.parse(jsonString); for (var i = 0; i < data.length; i++) { var item = data[i]; var li = document.createElement('li'); li.innerHTML = 'ID: ' + item.id + ', Name: ' + item.name + ', Description: ' + item.description; document.getElementById('list').appendChild(li); } ``` 3. **CRUD操作**： - **Create**（创建）：在前端，这可能涉及到向服务器发送新的JSON对象，添加到数据库。 - **Read**（读取）：从服务器获取JSON数据，并在HTML中展示。 - **Update**（更新）：用户修改数据后，将更新后的JSON对象发送回服务器进行更新操作。 - **Delete**（删除）：用户选择删除某个项时，发送包含要删除项ID的JSON请求给服务器，服务器根据ID删除对应记录。 4. **事件处理**： HTML源代码可能包含了按钮或其他交互元素，用于触发这些CRUD操作。例如，添加按钮可能有一个点击事件，该事件会调用JavaScript函数，将新的数据对象添加到数组中，并发送到服务器。 5. **Ajax通信**：前端与服务器之间的通信通常使用Ajax技术，如jQuery的`$.ajax()`或现代浏览器的`fetch()` API，它们允许异步地发送和接收数据，无需刷新整个页面。这个示例提供了关于如何在HTML页面中使用JSON数据，以及如何实现基本的CRUD操作的实践。学习这部分知识有助于理解Web应用中数据的处理流程，提升前后端交互的能力。

资源推荐

资源详情

资源评论

收起资源包目录

使用JSON值的数组封装数据.rar （2个子文件）

使用JSON值的数组封装数据

json2.html 3KB

json2.js 10KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>JSON简单应用</title> <SCRIPT LANGUAGE="JavaScript" type="text/javaScript" src="json2.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" type="text/javaScript">  </SCRIPT> </HEAD> <BODY> <form name="frmJson" method="post" action="#"> <input type="hidden" name="userInfo" value=""> <table width="450" align="center" border="1" cellspacing="0"> <tr> <td>姓名：</td> <td><input type="text" name="txtName"></td> <td>性别：</td> <td><input type="text" name="txtGender"></td> </tr> <tr> <td>年龄：</td> <td><input type="text" name="txtAge"></td> <td>地址：</td> <td><input type="text" name="txtAddress"></td> </tr> <tr align="center"> <td colspan="4" align="center"> <input type="button" value="确定" onclick="cfm()">   <input type="button" value="取消" onclick="cnl()"> </td> </tr> </table> <table width="450" align="center" border="1" cellspacing="0" id="dataTb"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>地址</th> </tr> </table> <center> <input type="button" value="提交" onclick="subForm()"> </center> </form> </BODY> </HTML>

评论收藏

内容反馈