后台生成JSON数据并前端传入数据库实例

本文档主要介绍了如何在前后端开发中使用JSON进行数据传输，特别是在将用户输入的数据存储到数据库的过程中。作者假设读者已经对JavaScript有基本了解，并且上一篇文章涉及到了生成多组文本输入。本文的重点在于演示后台生成JSON数据以及前端如何将数据以JSON格式发送至服务器。 首先，让我们从后台数据生成部分开始。后台函数`generateDtb()`接收用户输入的姓名值（`txtName`）以及两个数组（`firstGroup`和`secondGroup`），这些数组可能包含多个对象，每个对象代表一条数据记录。函数内部，通过一个循环，创建了一个新的JavaScript对象`row`，并将姓名、全款金额（`fullMoney`）和折扣（`discount`）字段设置为用户输入的值。然后，这个对象被添加到名为`dtb`的数组中，最后返回整个数组。 生成的JSON数据是通过将数组转换为字符串实现的。使用jQuery的`$.param()`方法或手动编写转换逻辑，可以将JavaScript对象数组转换为键值对形式的JSON字符串，例如： ```javascript var jsonStr = JSON.stringify(dtb); ``` 当用户点击按钮（`#lbtnOK`）时，前端触发一个AJAX请求，将JSON字符串`jsonStr`作为参数传递给`DiscountManger.aspx`页面。URL中的`ajax=1`表示这是一个AJAX请求，而非常规的页面刷新。在这个过程中，前端代码可能看起来像这样： ```javascript $("#lbtnOK").click(function() { var url = "DiscountManger.aspx?ajax=1"; var dtbJson = generateDtb(); // 调用后台函数获取JSON数据 $.ajax({ type: 'POST', // 使用POST方式发送数据 url: url, data: { dtb: dtbJson }, // 将JSON数据作为data参数 contentType: 'application/json', // 设置Content-Type为JSON success: function(response) { // 处理服务器响应 }, error: function(xhr, status, error) { // 处理错误 } }); }); ``` 在服务器端，`DiscountManger.aspx`页面需要解析接收到的JSON数据，将其解构为JavaScript对象，然后存储到数据库中。这通常涉及到使用服务器语言（如ASP.NET、Node.js、PHP等）的JSON解析库或内置的`JSON.parse()`方法。 总结来说，本文介绍了在前后端交互中如何使用JSON格式化数据，包括后台生成JSON数组，前端封装数据并发送AJAX请求，以及服务器端接收、解析和存储JSON数据。这对于构建可维护且高效的数据传输系统至关重要，尤其是在处理大量数据或复杂业务逻辑时。