轻松掌握AJAX对象数组数据处理从入门到精通的实用教程

1. AJAX基础概念与原理

1.1 什么是AJAX

AJAX（Asynchronous JavaScript and XML）是一种利用JavaScript脚本将XHTML、CSS、XML、DOM等技术融合在一起，并通过XMLHttpRequest对象进行异步数据请求的新思想。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，从而提高了用户体验度。

1.2 AJAX与传统Web请求的区别

传统Web应用中，浏览器向服务器提交数据后，需要等待服务器返回结果才能继续执行，返回的是整个页面（一般为HTML页）。而在AJAX Web应用中：

不需要等待服务器返回结果，浏览器可以继续做其他操作
服务器不一定返回整个页面，而是返回部分需要的数据
数据格式可以是JSON、XML等多种形式

1.3 AJAX实现基本步骤

AJAX的实现通常包括以下四个步骤：

获取浏览器端数据：从页面元素中获取用户输入或选择的数据
将获取的数据提交到服务器端：通过AJAX技术异步发送数据到服务器
接收服务器返回数据：处理服务器响应的数据
将接受的数据动态显示在页面上：将数据更新到页面相应位置

2. AJAX与JSON数据处理基础

2.1 JSON数据格式

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON有两种基本结构：

对象结构：{"key1": value1, "key2": value2}
数组结构：[value1, value2, value3]

2.2 JSON与JavaScript对象的转换

在AJAX中处理JSON数据时，经常需要在JSON字符串和JavaScript对象之间进行转换：

// 将JSON字符串转换为JavaScript对象 // 方法1：使用eval()（不推荐，有安全风险） var jsonObj = eval('(' + jsonStr + ')'); // 方法2：使用JSON.parse()（推荐） var jsonObj = JSON.parse(jsonStr); // 方法3：使用jQuery的parseJSON() var jsonObj = $.parseJSON(jsonStr); // 将JavaScript对象转换为JSON字符串 var jsonStr = JSON.stringify(jsonObj);

2.3 使用jQuery处理AJAX返回的JSON数据

当使用jQuery的AJAX方法时，可以指定dataType为json，这样返回的数据会自动转换为JavaScript对象：

$.ajax({ url: 'api/getData', type: 'GET', dataType: 'json', // 指定返回数据类型为JSON success: function(data) { // 这里的data已经是JavaScript对象，可以直接使用 console.log(data); } });

3. jQuery中的AJAX方法详解

3.1 常用jQuery AJAX方法

jQuery提供了多种AJAX方法，以下是常用的几种：

3.1.1 $.ajax()方法

$.ajax()是最基础的AJAX方法，提供了最全面的配置选项：

$.ajax({ url: 'api/getData', // 请求地址 type: 'GET', // 请求方式：GET、POST等 dataType: 'json', // 预期服务器返回的数据类型 data: {id: 1}, // 发送到服务器的数据 async: true, // 异步请求 success: function(data) {// 请求成功回调函数 console.log(data); }, error: function(xhr, status, error) { // 请求失败回调函数 console.error(error); } });

3.1.2 $.get()方法

$.get()是专门用于发送GET请求的简化方法：

$.get('api/getData', {id: 1}, function(data) { console.log(data); }, 'json');

3.1.3 $.post()方法

$.post()是专门用于发送POST请求的简化方法：

$.post('api/saveData', {name: 'John', age: 30}, function(data) { console.log(data); }, 'json');

3.1.4 $.getJSON()方法

$.getJSON()专门用于获取JSON格式的数据：

$.getJSON('api/getUsers', function(data) { console.log(data); });

3.1.5 load()方法

load()方法可以从服务器加载数据，并把返回的数据放置到指定的元素中：

$('#result').load('ajax/test.html #container');

3.2 表单数据序列化

在AJAX中发送表单数据时，可以使用serialize()方法将表单元素序列化为字符串：

// 序列化整个表单 var formData = $('form').serialize(); console.log(formData); // 输出：name=John&age=30&... // 发送序列化后的表单数据 $.post('api/submitForm', formData, function(data) { console.log(data); });

4. 对象数组的处理与传递

4.1 前端对象数组传递到后台

在Web应用中，经常需要将前端的对象数组传递到后台服务器进行处理。以下是实现方法：

// 定义对象数组 var users = [ {name: 'John', age: 30}, {name: 'Jane', age: 25}, {name: 'Bob', age: 35} ]; // 使用AJAX发送对象数组到后台 $.ajax({ url: 'api/saveUsers', type: 'POST', contentType: 'application/json', // 指定请求内容类型为JSON data: JSON.stringify(users), // 将对象数组序列化为JSON字符串 success: function(data) { console.log('保存成功:', data); }, error: function(xhr, status, error) { console.error('保存失败:', error); } });

在后台服务器（如Java Spring MVC）中，可以这样接收和处理对象数组：

@RequestMapping(value = "/api/saveUsers", method = RequestMethod.POST) @ResponseBody public String saveUsers(@RequestBody List<User> users) { // 处理接收到的用户列表 for (User user : users) { userService.saveUser(user); } return "{"success": true, "message": "保存成功"}"; }

4.2 处理后台返回的对象数组

当后台返回对象数组时，前端可以这样处理：

$.getJSON('api/getUsers', function(data) { // data是用户对象数组 var html = ''; // 遍历数组，生成HTML for (var i = 0; i < data.length; i++) { var user = data[i]; html += '<tr>'; html += '<td>' + user.id + '</td>'; html += '<td>' + user.name + '</td>'; html += '<td>' + user.age + '</td>'; html += '</tr>'; } // 将生成的HTML添加到表格中 $('#userTable tbody').html(html); });

4.3 使用数组对象封装多个AJAX请求

当需要处理多个AJAX请求时，可以使用数组对象来封装这些请求，使代码更加简洁和易于维护：

// 定义请求数组 const requests = [ { url: 'api/getUsers', method: 'GET', success: function(data) { console.log('用户列表:', data); }, error: function(xhr, status, errorThrown) { console.error('获取用户列表失败:', errorThrown); } }, { url: 'api/getProducts', method: 'GET', success: function(data) { console.log('产品列表:', data); }, error: function(xhr, status, errorThrown) { console.error('获取产品列表失败:', errorThrown); } } ]; // 遍历数组，执行每个请求 requests.forEach(function(request) { $.ajax(request); });

如果需要同时发起多个AJAX请求，并在所有请求完成后执行回调函数，可以使用$.when()和$.then()方法：

// 定义多个AJAX请求 var request1 = $.get('api/getUsers'); var request2 = $.get('api/getProducts'); // 当所有请求完成时执行回调 $.when(request1, request2).then(function(response1, response2) { var users = response1[0]; var products = response2[0]; console.log('所有数据加载完成'); console.log('用户:', users); console.log('产品:', products); // 处理数据... }, function(error) { console.error('请求失败:', error); });

5. 原生AJAX与XMLHttpRequest

5.1 使用XMLHttpRequest发起GET请求

虽然jQuery的AJAX方法简化了操作，但了解原生AJAX的实现原理也很重要：

// 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 配置请求 xhr.open('GET', 'api/getUsers?id=1', true); // 设置回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { // 请求完成 if (xhr.status === 200) { // 请求成功 var data = JSON.parse(xhr.responseText); console.log(data); } else { console.error('请求失败:', xhr.statusText); } } }; // 发送请求 xhr.send();

5.2 使用XMLHttpRequest发起POST请求

// 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 配置请求 xhr.open('POST', 'api/saveUser', true); xhr.setRequestHeader('Content-Type', 'application/json'); // 设置回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } else { console.error('请求失败:', xhr.statusText); } } }; // 准备发送的数据 var userData = { name: 'John', age: 30 }; // 发送请求 xhr.send(JSON.stringify(userData));

5.3 XMLHttpRequest Level2的新功能

XMLHttpRequest Level2提供了一些新功能，使AJAX操作更加便捷：

5.3.1 设置HTTP请求时限

var xhr = new XMLHttpRequest(); xhr.open('GET', 'api/getData', true); xhr.timeout = 5000; // 设置超时时间为5秒 xhr.ontimeout = function() { console.error('请求超时'); }; xhr.send();

5.3.2 FormData对象管理表单数据

// 创建FormData对象 var formData = new FormData(document.getElementById('myForm')); // 也可以手动添加数据 formData.append('username', 'John'); formData.append('age', 30); // 发送FormData var xhr = new XMLHttpRequest(); xhr.open('POST', 'api/submitForm', true); xhr.send(formData);

5.3.3 上传文件

// 获取文件输入元素 var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; // 创建FormData对象并添加文件 var formData = new FormData(); formData.append('file', file); // 发送文件 var xhr = new XMLHttpRequest(); xhr.open('POST', 'api/upload', true); // 监听上传进度 xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percent = Math.round((e.loaded / e.total) * 100); console.log('上传进度:', percent + '%'); } }; xhr.send(formData);

6. 高级技巧与最佳实践

6.1 封装可复用的AJAX函数

为了提高代码复用性，可以封装一些常用的AJAX函数：

// 封装GET请求 function ajaxGet(url, params, successCallback, errorCallback) { $.ajax({ url: url, type: 'GET', data: params, dataType: 'json', success: function(data) { if (typeof successCallback === 'function') { successCallback(data); } }, error: function(xhr, status, error) { if (typeof errorCallback === 'function') { errorCallback(xhr, status, error); } else { console.error('AJAX GET请求失败:', error); } } }); } // 封装POST请求 function ajaxPost(url, data, successCallback, errorCallback) { $.ajax({ url: url, type: 'POST', contentType: 'application/json', data: JSON.stringify(data), dataType: 'json', success: function(data) { if (typeof successCallback === 'function') { successCallback(data); } }, error: function(xhr, status, error) { if (typeof errorCallback === 'function') { errorCallback(xhr, status, error); } else { console.error('AJAX POST请求失败:', error); } } }); } // 使用封装的函数 ajaxGet('api/getUsers', {page: 1, pageSize: 10}, function(data) { console.log('获取用户列表成功:', data); }); ajaxPost('api/saveUser', {name: 'John', age: 30}, function(data) { console.log('保存用户成功:', data); });

6.2 使用Promise封装AJAX

使用Promise可以更好地处理异步操作，避免回调地狱：

// 封装基于Promise的AJAX GET请求 function promiseGet(url, params) { return new Promise(function(resolve, reject) { $.ajax({ url: url, type: 'GET', data: params, dataType: 'json', success: function(data) { resolve(data); }, error: function(xhr, status, error) { reject(error); } }); }); } // 封装基于Promise的AJAX POST请求 function promisePost(url, data) { return new Promise(function(resolve, reject) { $.ajax({ url: url, type: 'POST', contentType: 'application/json', data: JSON.stringify(data), dataType: 'json', success: function(data) { resolve(data); }, error: function(xhr, status, error) { reject(error); } }); }); } // 使用Promise封装的函数 promiseGet('api/getUsers', {page: 1, pageSize: 10}) .then(function(data) { console.log('获取用户列表成功:', data); return promisePost('api/saveUser', {name: 'John', age: 30}); }) .then(function(data) { console.log('保存用户成功:', data); }) .catch(function(error) { console.error('操作失败:', error); });

6.3 使用async/await处理AJAX

ES2017引入的async/await语法使异步代码看起来更像同步代码，提高了可读性：

// 定义基于Promise的AJAX函数（同上） function promiseGet(url, params) { return new Promise(function(resolve, reject) { $.ajax({ url: url, type: 'GET', data: params, dataType: 'json', success: resolve, error: function(xhr, status, error) { reject(error); } }); }); } function promisePost(url, data) { return new Promise(function(resolve, reject) { $.ajax({ url: url, type: 'POST', contentType: 'application/json', data: JSON.stringify(data), dataType: 'json', success: resolve, error: function(xhr, status, error) { reject(error); } }); }); } // 使用async/await处理AJAX async function handleUserData() { try { // 获取用户列表 const users = await promiseGet('api/getUsers', {page: 1, pageSize: 10}); console.log('获取用户列表成功:', users); // 保存新用户 const result = await promisePost('api/saveUser', {name: 'John', age: 30}); console.log('保存用户成功:', result); return result; } catch (error) { console.error('操作失败:', error); throw error; } } // 调用async函数 handleUserData() .then(function(result) { console.log('所有操作完成:', result); }) .catch(function(error) { console.error('最终错误:', error); });

6.4 AJAX请求的错误处理与重试机制

在实际应用中，网络请求可能会失败，实现错误处理和重试机制非常重要：

// 带重试机制的AJAX请求 function ajaxWithRetry(url, options, maxRetries, retryDelay) { maxRetries = maxRetries || 3; retryDelay = retryDelay || 1000; return new Promise(function(resolve, reject) { var retryCount = 0; function attemptRequest() { $.ajax({ url: url, type: options.type || 'GET', data: options.data || {}, dataType: 'json', contentType: options.contentType || 'application/json', success: function(data) { resolve(data); }, error: function(xhr, status, error) { retryCount++; if (retryCount <= maxRetries) { console.log('请求失败，' + retryDelay + 'ms后重试 (尝试 ' + retryCount + '/' + maxRetries + ')'); setTimeout(attemptRequest, retryDelay); } else { reject(error); } } }); } attemptRequest(); }); } // 使用带重试机制的AJAX请求 ajaxWithRetry('api/getData', {type: 'GET'}, 3, 2000) .then(function(data) { console.log('请求成功:', data); }) .catch(function(error) { console.error('所有重试失败:', error); });

7. 实战案例：从入门到精通

7.1 案例1：用户管理系统

下面是一个完整的用户管理系统示例，展示如何使用AJAX处理对象数组：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用户管理系统</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } form { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } .form-group { margin-bottom: 10px; } label { display: inline-block; width: 80px; } input[type="text"], input[type="number"] { padding: 5px; width: 200px; } button { padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } button:hover { background-color: #45a049; } .notification { padding: 10px; margin-bottom: 20px; border-radius: 5px; display: none; } .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .loading { display: none; text-align: center; margin: 20px 0; } </style> </head> <body> <h1>用户管理系统</h1> <div id="notification" class="notification"></div> <form id="userForm"> <h2>添加/编辑用户</h2> <input type="hidden" id="userId" name="id"> <div class="form-group"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="age">年龄:</label> <input type="number" id="age" name="age" required> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="text" id="email" name="email" required> </div> <button type="submit">保存</button> <button type="button" id="resetForm">重置</button> </form> <div class="loading" id="loading">加载中，请稍候...</div> <h2>用户列表</h2> <table id="userTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 用户数据将通过AJAX加载 --> </tbody> </table> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 加载用户列表 loadUsers(); // 表单提交事件 $('#userForm').submit(function(e) { e.preventDefault(); saveUser(); }); // 重置表单按钮点击事件 $('#resetForm').click(function() { resetForm(); }); }); // 加载用户列表 function loadUsers() { showLoading(true); $.ajax({ url: 'api/getUsers', type: 'GET', dataType: 'json', success: function(data) { renderUserTable(data); showNotification('用户列表加载成功', 'success'); }, error: function(xhr, status, error) { showNotification('加载用户列表失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } // 渲染用户表格 function renderUserTable(users) { var tbody = $('#userTable tbody'); tbody.empty(); if (users.length === 0) { tbody.append('<tr><td colspan="5">没有用户数据</td></tr>'); return; } for (var i = 0; i < users.length; i++) { var user = users[i]; var row = '<tr>'; row += '<td>' + user.id + '</td>'; row += '<td>' + user.name + '</td>'; row += '<td>' + user.age + '</td>'; row += '<td>' + user.email + '</td>'; row += '<td>'; row += '<button onclick="editUser(' + JSON.stringify(user).replace(/"/g, '&quot;') + ')">编辑</button> '; row += '<button onclick="deleteUser(' + user.id + ')">删除</button>'; row += '</td>'; row += '</tr>'; tbody.append(row); } } // 保存用户 function saveUser() { var userId = $('#userId').val(); var isEdit = userId !== ''; var url = isEdit ? 'api/updateUser' : 'api/addUser'; var userData = { id: userId || 0, name: $('#name').val(), age: parseInt($('#age').val()), email: $('#email').val() }; showLoading(true); $.ajax({ url: url, type: 'POST', contentType: 'application/json', data: JSON.stringify(userData), dataType: 'json', success: function(data) { if (data.success) { showNotification(isEdit ? '用户更新成功' : '用户添加成功', 'success'); resetForm(); loadUsers(); } else { showNotification('操作失败: ' + data.message, 'error'); } }, error: function(xhr, status, error) { showNotification('保存用户失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } // 编辑用户 function editUser(user) { $('#userId').val(user.id); $('#name').val(user.name); $('#age').val(user.age); $('#email').val(user.email); // 滚动到表单位置 $('html, body').animate({ scrollTop: $('#userForm').offset().top }, 500); } // 删除用户 function deleteUser(userId) { if (confirm('确定要删除此用户吗？')) { showLoading(true); $.ajax({ url: 'api/deleteUser', type: 'POST', data: JSON.stringify({id: userId}), contentType: 'application/json', dataType: 'json', success: function(data) { if (data.success) { showNotification('用户删除成功', 'success'); loadUsers(); } else { showNotification('删除失败: ' + data.message, 'error'); } }, error: function(xhr, status, error) { showNotification('删除用户失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } } // 重置表单 function resetForm() { $('#userForm')[0].reset(); $('#userId').val(''); } // 显示通知 function showNotification(message, type) { var notification = $('#notification'); notification.removeClass('success error').addClass(type); notification.text(message); notification.fadeIn(); // 3秒后自动隐藏 setTimeout(function() { notification.fadeOut(); }, 3000); } // 显示/隐藏加载指示器 function showLoading(show) { if (show) { $('#loading').fadeIn(); } else { $('#loading').fadeOut(); } } </script> </body> </html>

7.2 案例2：批量数据处理

下面是一个批量处理数据的示例，展示如何使用AJAX处理对象数组：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>批量数据处理系统</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 1200px; margin: 0 auto; } .panel { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 20px; } .panel-header { font-size: 18px; font-weight: bold; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .form-group { margin-bottom: 10px; } label { display: inline-block; width: 100px; } input[type="text"], input[type="number"], select { padding: 5px; width: 200px; } button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; margin-right: 10px; } button:hover { background-color: #45a049; } button.danger { background-color: #f44336; } button.danger:hover { background-color: #d32f2f; } button.info { background-color: #2196F3; } button.info:hover { background-color: #0b7dda; } .notification { padding: 10px; margin-bottom: 20px; border-radius: 5px; display: none; } .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } .loading { display: none; text-align: center; margin: 20px 0; } .progress-container { width: 100%; background-color: #f1f1f1; border-radius: 4px; margin: 10px 0; } .progress-bar { width: 0%; height: 20px; background-color: #4CAF50; border-radius: 4px; text-align: center; line-height: 20px; color: white; } .file-upload { margin-bottom: 15px; } .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 15px; } .tab { padding: 10px 15px; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 5px 5px 0 0; margin-right: 5px; } .tab.active { background-color: #f1f1f1; border-color: #ddd; border-bottom-color: #fff; margin-bottom: -1px; } .tab-content { display: none; } .tab-content.active { display: block; } </style> </head> <body> <div class="container"> <h1>批量数据处理系统</h1> <div id="notification" class="notification"></div> <div class="tabs"> <div class="tab active" onclick="showTab('manual-input')">手动输入</div> <div class="tab" onclick="showTab('file-upload')">文件上传</div> <div class="tab" onclick="showTab('batch-process')">批量处理</div> </div> <div id="manual-input" class="tab-content active"> <div class="panel"> <div class="panel-header">手动输入数据</div> <form id="dataForm"> <div class="form-group"> <label for="itemName">项目名称:</label> <input type="text" id="itemName" name="itemName" required> </div> <div class="form-group"> <label for="itemValue">项目值:</label> <input type="number" id="itemValue" name="itemValue" required> </div> <div class="form-group"> <label for="itemCategory">类别:</label> <select id="itemCategory" name="itemCategory"> <option value="A">类别A</option> <option value="B">类别B</option> <option value="C">类别C</option> </select> </div> <button type="submit">添加到列表</button> <button type="button" id="clearForm">清空表单</button> </form> </div> <div class="panel"> <div class="panel-header">数据列表</div> <table id="dataTable"> <thead> <tr> <th>ID</th> <th>项目名称</th> <th>项目值</th> <th>类别</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据将通过JavaScript动态添加 --> </tbody> </table> <button id="saveData" class="info">保存数据</button> <button id="clearData" class="danger">清空列表</button> </div> </div> <div id="file-upload" class="tab-content"> <div class="panel"> <div class="panel-header">文件上传</div> <div class="file-upload"> <label for="csvFile">选择CSV文件:</label> <input type="file" id="csvFile" accept=".csv"> </div> <button id="uploadFile" class="info">上传并解析</button> <button id="downloadTemplate" class="info">下载模板</button> </div> <div class="panel" id="uploadedDataPanel" style="display: none;"> <div class="panel-header">上传的数据预览</div> <table id="uploadedDataTable"> <thead> <tr> <th>项目名称</th> <th>项目值</th> <th>类别</th> </tr> </thead> <tbody> <!-- 上传的数据将在这里显示 --> </tbody> </table> <button id="saveUploadedData" class="info">保存上传的数据</button> </div> </div> <div id="batch-process" class="tab-content"> <div class="panel"> <div class="panel-header">批量处理</div> <div class="form-group"> <label for="processType">处理类型:</label> <select id="processType"> <option value="export">导出数据</option> <option value="calculate">计算统计</option> <option value="transform">数据转换</option> </select> </div> <button id="startBatchProcess" class="info">开始处理</button> <div class="progress-container" id="progressContainer" style="display: none;"> <div class="progress-bar" id="progressBar">0%</div> </div> <div id="processResult" style="display: none;"> <div class="panel-header">处理结果</div> <div id="resultContent"></div> </div> </div> </div> <div class="loading" id="loading">处理中，请稍候...</div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 初始化数据数组 var dataItems = []; var uploadedItems = []; // 表单提交事件 $('#dataForm').submit(function(e) { e.preventDefault(); addDataItem(); }); // 清空表单按钮点击事件 $('#clearForm').click(function() { $('#dataForm')[0].reset(); }); // 保存数据按钮点击事件 $('#saveData').click(function() { saveDataItems(); }); // 清空列表按钮点击事件 $('#clearData').click(function() { if (confirm('确定要清空所有数据吗？')) { dataItems = []; renderDataTable(); showNotification('数据列表已清空', 'info'); } }); // 上传文件按钮点击事件 $('#uploadFile').click(function() { uploadAndParseFile(); }); // 下载模板按钮点击事件 $('#downloadTemplate').click(function() { downloadTemplate(); }); // 保存上传的数据按钮点击事件 $('#saveUploadedData').click(function() { saveUploadedData(); }); // 开始批量处理按钮点击事件 $('#startBatchProcess').click(function() { startBatchProcess(); }); }); // 切换标签页 function showTab(tabId) { // 隐藏所有标签内容 $('.tab-content').removeClass('active'); // 移除所有标签的active类 $('.tab').removeClass('active'); // 显示选中的标签内容 $('#' + tabId).addClass('active'); // 为选中的标签添加active类 $('.tab').each(function() { if ($(this).text().includes(getTabName(tabId))) { $(this).addClass('active'); } }); } // 获取标签名称 function getTabName(tabId) { switch(tabId) { case 'manual-input': return '手动输入'; case 'file-upload': return '文件上传'; case 'batch-process': return '批量处理'; default: return ''; } } // 添加数据项 function addDataItem() { var item = { id: dataItems.length > 0 ? Math.max(...dataItems.map(i => i.id)) + 1 : 1, itemName: $('#itemName').val(), itemValue: parseInt($('#itemValue').val()), itemCategory: $('#itemCategory').val() }; dataItems.push(item); renderDataTable(); $('#dataForm')[0].reset(); showNotification('数据项已添加到列表', 'success'); } // 渲染数据表格 function renderDataTable() { var tbody = $('#dataTable tbody'); tbody.empty(); if (dataItems.length === 0) { tbody.append('<tr><td colspan="5">没有数据</td></tr>'); return; } for (var i = 0; i < dataItems.length; i++) { var item = dataItems[i]; var row = '<tr>'; row += '<td>' + item.id + '</td>'; row += '<td>' + item.itemName + '</td>'; row += '<td>' + item.itemValue + '</td>'; row += '<td>' + item.itemCategory + '</td>'; row += '<td>'; row += '<button onclick="editDataItem(' + item.id + ')">编辑</button> '; row += '<button onclick="deleteDataItem(' + item.id + ')" class="danger">删除</button>'; row += '</td>'; row += '</tr>'; tbody.append(row); } } // 编辑数据项 function editDataItem(id) { var item = dataItems.find(i => i.id === id); if (item) { $('#itemName').val(item.itemName); $('#itemValue').val(item.itemValue); $('#itemCategory').val(item.itemCategory); // 删除原项目，编辑后作为新项目添加 deleteDataItem(id); // 切换到手动输入标签 showTab('manual-input'); } } // 删除数据项 function deleteDataItem(id) { dataItems = dataItems.filter(item => item.id !== id); renderDataTable(); showNotification('数据项已删除', 'info'); } // 保存数据项 function saveDataItems() { if (dataItems.length === 0) { showNotification('没有数据可保存', 'error'); return; } showLoading(true); $.ajax({ url: 'api/saveBatchData', type: 'POST', contentType: 'application/json', data: JSON.stringify(dataItems), dataType: 'json', success: function(response) { if (response.success) { showNotification('数据保存成功，保存了 ' + response.count + ' 条记录', 'success'); } else { showNotification('保存失败: ' + response.message, 'error'); } }, error: function(xhr, status, error) { showNotification('保存数据失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } // 上传并解析文件 function uploadAndParseFile() { var fileInput = $('#csvFile')[0]; if (fileInput.files.length === 0) { showNotification('请选择要上传的文件', 'error'); return; } var file = fileInput.files[0]; var reader = new FileReader(); showLoading(true); reader.onload = function(e) { try { var csv = e.target.result; var lines = csv.split('n'); var headers = lines[0].split(','); uploadedItems = []; for (var i = 1; i < lines.length; i++) { if (lines[i].trim() === '') continue; var values = lines[i].split(','); if (values.length >= 3) { uploadedItems.push({ itemName: values[0].trim(), itemValue: parseInt(values[1].trim()), itemCategory: values[2].trim() }); } } renderUploadedDataTable(); $('#uploadedDataPanel').show(); showNotification('文件上传成功，解析了 ' + uploadedItems.length + ' 条记录', 'success'); } catch (error) { showNotification('解析文件失败: ' + error.message, 'error'); } finally { showLoading(false); } }; reader.onerror = function() { showNotification('读取文件失败', 'error'); showLoading(false); }; reader.readAsText(file); } // 渲染上传的数据表格 function renderUploadedDataTable() { var tbody = $('#uploadedDataTable tbody'); tbody.empty(); for (var i = 0; i < uploadedItems.length; i++) { var item = uploadedItems[i]; var row = '<tr>'; row += '<td>' + item.itemName + '</td>'; row += '<td>' + item.itemValue + '</td>'; row += '<td>' + item.itemCategory + '</td>'; row += '</tr>'; tbody.append(row); } } // 下载模板 function downloadTemplate() { var csv = '项目名称,项目值,类别n示例项目,100,A'; var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', '数据模板.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); showNotification('模板下载成功', 'success'); } // 保存上传的数据 function saveUploadedData() { if (uploadedItems.length === 0) { showNotification('没有上传的数据可保存', 'error'); return; } showLoading(true); $.ajax({ url: 'api/saveBatchData', type: 'POST', contentType: 'application/json', data: JSON.stringify(uploadedItems), dataType: 'json', success: function(response) { if (response.success) { showNotification('数据保存成功，保存了 ' + response.count + ' 条记录', 'success'); uploadedItems = []; $('#uploadedDataPanel').hide(); $('#csvFile').val(''); } else { showNotification('保存失败: ' + response.message, 'error'); } }, error: function(xhr, status, error) { showNotification('保存数据失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } // 开始批量处理 function startBatchProcess() { var processType = $('#processType').val(); if (processType === 'export') { exportData(); } else if (processType === 'calculate') { calculateStatistics(); } else if (processType === 'transform') { transformData(); } } // 导出数据 function exportData() { showLoading(true); $.ajax({ url: 'api/getAllData', type: 'GET', dataType: 'json', success: function(data) { if (data.length === 0) { showNotification('没有数据可导出', 'error'); return; } // 创建CSV内容 var csv = 'ID,项目名称,项目值,类别n'; for (var i = 0; i < data.length; i++) { var item = data[i]; csv += item.id + ',' + item.itemName + ',' + item.itemValue + ',' + item.itemCategory + 'n'; } // 创建Blob并下载 var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); var url = URL.createObjectURL(blob); var link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', '数据导出_' + new Date().toISOString().slice(0, 10) + '.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); showNotification('数据导出成功，共导出 ' + data.length + ' 条记录', 'success'); }, error: function(xhr, status, error) { showNotification('导出数据失败: ' + error, 'error'); }, complete: function() { showLoading(false); } }); } // 计算统计 function calculateStatistics() { showLoading(true); $('#progressContainer').show(); $.ajax({ url: 'api/getAllData', type: 'GET', dataType: 'json', success: function(data) { if (data.length === 0) { showNotification('没有数据可统计', 'error'); return; } // 模拟进度更新 var progress = 0; var progressInterval = setInterval(function() { progress += 10; updateProgress(progress); if (progress >= 100) { clearInterval(progressInterval); // 计算统计数据 var totalValue = data.reduce((sum, item) => sum + item.itemValue, 0); var averageValue = totalValue / data.length; var categoryStats = {}; for (var i = 0; i < data.length; i++) { var category = data[i].itemCategory; if (!categoryStats[category]) { categoryStats[category] = { count: 0, totalValue: 0 }; } categoryStats[category].count++; categoryStats[category].totalValue += data[i].itemValue; } // 显示结果 var resultHtml = '<h3>统计结果</h3>'; resultHtml += '<p>总记录数: ' + data.length + '</p>'; resultHtml += '<p>总项目值: ' + totalValue + '</p>'; resultHtml += '<p>平均项目值: ' + averageValue.toFixed(2) + '</p>'; resultHtml += '<h4>按类别统计</h4>'; resultHtml += '<table>'; resultHtml += '<tr><th>类别</th><th>记录数</th><th>总项目值</th><th>平均值</th></tr>'; for (var category in categoryStats) { var stats = categoryStats[category]; var avgValue = stats.totalValue / stats.count; resultHtml += '<tr>'; resultHtml += '<td>' + category + '</td>'; resultHtml += '<td>' + stats.count + '</td>'; resultHtml += '<td>' + stats.totalValue + '</td>'; resultHtml += '<td>' + avgValue.toFixed(2) + '</td>'; resultHtml += '</tr>'; } resultHtml += '</table>'; $('#resultContent').html(resultHtml); $('#processResult').show(); showNotification('统计计算完成', 'success'); } }, 200); }, error: function(xhr, status, error) { showNotification('获取数据失败: ' + error, 'error'); $('#progressContainer').hide(); }, complete: function() { showLoading(false); } }); } // 数据转换 function transformData() { showLoading(true); $('#progressContainer').show(); $.ajax({ url: 'api/getAllData', type: 'GET', dataType: 'json', success: function(data) { if (data.length === 0) { showNotification('没有数据可转换', 'error'); return; } // 模拟进度更新 var progress = 0; var progressInterval = setInterval(function() { progress += 5; updateProgress(progress); if (progress >= 100) { clearInterval(progressInterval); // 数据转换：将类别A和B合并为AB，类别C保持不变 var transformedData = data.map(item => { var newItem = {...item}; if (item.itemCategory === 'A' || item.itemCategory === 'B') { newItem.itemCategory = 'AB'; } return newItem; }); // 显示转换前后的对比 var resultHtml = '<h3>数据转换结果</h3>'; resultHtml += '<p>转换规则: 类别A和B合并为AB，类别C保持不变</p>'; resultHtml += '<h4>转换前后对比</h4>'; resultHtml += '<table>'; resultHtml += '<tr><th>ID</th><th>项目名称</th><th>原类别</th><th>新类别</th></tr>'; for (var i = 0; i < Math.min(10, data.length); i++) { var original = data[i]; var transformed = transformedData[i]; resultHtml += '<tr>'; resultHtml += '<td>' + original.id + '</td>'; resultHtml += '<td>' + original.itemName + '</td>'; resultHtml += '<td>' + original.itemCategory + '</td>'; resultHtml += '<td>' + transformed.itemCategory + '</td>'; resultHtml += '</tr>'; } if (data.length > 10) { resultHtml += '<tr><td colspan="4">... 还有 ' + (data.length - 10) + ' 条记录 ...</td></tr>'; } resultHtml += '</table>'; // 显示转换后的统计 var categoryStats = {}; for (var i = 0; i < transformedData.length; i++) { var category = transformedData[i].itemCategory; if (!categoryStats[category]) { categoryStats[category] = 0; } categoryStats[category]++; } resultHtml += '<h4>转换后类别分布</h4>'; resultHtml += '<table>'; resultHtml += '<tr><th>类别</th><th>记录数</th></tr>'; for (var category in categoryStats) { resultHtml += '<tr>'; resultHtml += '<td>' + category + '</td>'; resultHtml += '<td>' + categoryStats[category] + '</td>'; resultHtml += '</tr>'; } resultHtml += '</table>'; $('#resultContent').html(resultHtml); $('#processResult').show(); showNotification('数据转换完成', 'success'); } }, 100); }, error: function(xhr, status, error) { showNotification('获取数据失败: ' + error, 'error'); $('#progressContainer').hide(); }, complete: function() { showLoading(false); } }); } // 更新进度条 function updateProgress(percent) { $('#progressBar').width(percent + '%'); $('#progressBar').text(percent + '%'); } // 显示通知 function showNotification(message, type) { var notification = $('#notification'); notification.removeClass('success error info').addClass(type); notification.text(message); notification.fadeIn(); // 3秒后自动隐藏 setTimeout(function() { notification.fadeOut(); }, 3000); } // 显示/隐藏加载指示器 function showLoading(show) { if (show) { $('#loading').fadeIn(); } else { $('#loading').fadeOut(); } } </script> </body> </html>