ajax异步请求新增查詢修改，實現html數據實時更新代碼

时间: 2023-05-30 19:07:12 浏览: 186

ajax异步请求

### AJAX异步请求详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页可以实现动态更新。这种交互方式极大地提高了用户体验。 #### 二、基础知识 1. **HTTP请求**：在Web开发中，客户端（浏览器）通过HTTP协议向服务器发送请求，并接收服务器返回的数据。请求方式主要有GET和POST两种。 - GET：将参数附在URL后面，安全性较低，适用于获取数据。 - POST：将参数放在请求体中，安全性较高，适用于提交数据。 2. **JavaScript**：一种广泛用于网页开发的脚本语言，可以用来控制网页的行为和响应用户的交互。 3. **XMLHttpRequest对象**：是AJAX的核心，用于在后台与服务器进行异步数据交换。 #### 三、AJAX工作原理 1. **创建XMLHttpRequest对象**： ```javascript function createXMLHttpRequest() { // 根据不同的浏览器创建对象 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { // 兼容IE低版本 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } ``` 2. **发送请求**： - **open方法**：初始化一个HTTP请求。 ```javascript xmlHttp.open("get", "UserServlet.do?time=" + day.getTime() + "&username=" + username); ``` - **send方法**：发送请求到服务器。 ```javascript xmlHttp.send(null); ``` 3. **处理服务器响应**： - **onreadystatechange事件**：当请求状态改变时触发。 ```javascript xmlHttp.onreadystatechange = back; ``` - **readyState属性**：表示请求/响应过程中的不同状态。 - 0：未初始化 - 1：启动 - 2：发送 - 3：接受 - 4：完成 - **status属性**：表示HTTP状态码。 - 200：成功 - 404：找不到资源 - 500：服务器内部错误 - **responseText属性**：包含服务器返回的数据。 ```javascript alert(xmlHttp.responseText); // 显示服务器返回的信息 ``` #### 四、示例代码解析 1. **创建XMLHttpRequest对象**： - 代码片段中使用了`new XMLHttpRequest()`来创建对象，但没有考虑到浏览器兼容性问题。 2. **设置请求**： - 使用`open`方法设置请求方式为GET，URL包含了动态参数`time`和`username`。 - `send(null)`发送请求。 3. **响应处理**： - `onreadystatechange`事件绑定到`back`函数。 - 检查`readyState`是否为4（完成）且`status`为200（成功）。 - 通过`alert`显示服务器返回的文本。 #### 五、Java后端处理 1. **返回数据**： - 在Java后端通过`PrintWriter`对象向客户端输出字符串"ok"。 - 使用`flush()`方法确保数据立即发送。 2. **注意事项**： - 通常情况下，应考虑使用JSON格式而非简单的字符串来传输数据，以提高数据处理效率和可读性。 - 服务器端应根据实际业务逻辑处理请求并返回适当的数据。 #### 六、总结 AJAX技术通过异步请求大大提升了Web应用的交互性和用户体验。本文介绍了AJAX的基本概念、工作原理以及一个简单的示例。对于开发者来说，掌握AJAX技术是非常重要的，它可以帮助构建更加高效、灵活的Web应用程序。

以下是一个基本的ajax实现HTML数据实时更新的代码示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>AJAX实时更新HTML数据</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <h1>学生列表</h1> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody id="student-list">  </tbody> </table> <br> <h2>添加学生</h2> <form id="add-form"> <label for="name">姓名：</label> <input type="text" name="name" required> <label for="age">年龄：</label> <input type="number" name="age" required> <label for="gender">性别：</label> <select name="gender" required> <option value=""></option> <option value="男">男</option> <option value="女">女</option> </select> <button type="submit">添加</button> </form> </body> </html> ``` JavaScript代码： ```javascript $(document).ready(function() { // 页面加载时获取学生列表 getStudents(); // 提交添加学生表单 $("#add-form").submit(function(event) { event.preventDefault(); addStudent(); }); // 点击编辑按钮 $(document).on("click", ".edit-btn", function() { var id = $(this).closest("tr").attr("data-id"); editStudent(id); }); // 点击删除按钮 $(document).on("click", ".delete-btn", function() { var id = $(this).closest("tr").attr("data-id"); deleteStudent(id); }); }); // 获取学生列表 function getStudents() { $.ajax({ url: "get_students.php", method: "GET", dataType: "json", success: function(data) { // 清空学生列表 $("#student-list").empty(); // 动态添加学生列表 $.each(data, function(index, student) { $("#student-list").append( "<tr data-id='" + student.id + "'>" + "<td>" + student.id + "</td>" + "<td>" + student.name + "</td>" + "<td>" + student.age + "</td>" + "<td>" + student.gender + "</td>" + "<td><button class='edit-btn'>编辑</button></td>" + "<td><button class='delete-btn'>删除</button></td>" + "</tr>" ); }); } }); } // 添加学生 function addStudent() { $.ajax({ url: "add_student.php", method: "POST", data: $("#add-form").serialize(), dataType: "json", success: function(data) { if (data.success) { // 添加成功，清空表单并重新获取学生列表 $("#add-form")[0].reset(); getStudents(); } else { alert(data.message); } } }); } // 编辑学生 function editStudent(id) { // TODO: 实现编辑学生的功能 } // 删除学生 function deleteStudent(id) { $.ajax({ url: "delete_student.php", method: "POST", data: {id: id}, dataType: "json", success: function(data) { if (data.success) { // 删除成功，重新获取学生列表 getStudents(); } else { alert(data.message); } } }); } ``` 以上代码实现了以下功能： 1. 页面加载时自动获取学生列表并动态添加到页面中。 2. 点击添加学生按钮时，通过ajax将表单数据提交给服务器添加新的学生，并在添加成功后清空表单并重新获取学生列表。 3. 点击编辑按钮时，通过ajax获取指定学生的信息，显示在表单中，允许用户修改并提交表单更新学生信息。 4. 点击删除按钮时，通过ajax删除指定学生，并在删除成功后重新获取学生列表。

阅读全文

ajax异步请求新增查詢修改，實現html數據實時更新代碼

相关推荐

异步更新数据方法

ajax异步刷新实现更新数据库

ajax异步请求新增查詢修改

html5中，ajax异步请求新增查詢修改，實現html數據實時更新代碼，完整代碼

layui-tree实现Ajax异步请求后动态添加节点的方法

H5移动端上滑加载，带ajax异步请求后台数据，拿来即用

最基本的CRUD系统，采用IDEA+Maven搭建，具备前后端交互功能，前端采用BootStrap+Ajax异步请求DOM渲染（

ajax实现异步提交，对新增用户进行判断的实例

Ajax异步请求类实现跨域支持

使用AJAX请求：前端可以使用AJAX技术发起异步请求，从后端获取数据。AJAX请求可以通过XMLHttpRequest对象或者fetch函数来实现

ajax实现新增修改实例

bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

纯js实现瀑布流布局及ajax动态新增数据

使用Ajax实现页面表格添删改查的异步刷新操作

PHP Ajax实现表格实时编辑

通过Ajax方式上传文件使用FormData进行Ajax请求

ajax+asp修改新增都在一个页上小小实例

asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据

Ajax技术详解：异步交互与应用场景

最新推荐

全套HTML5开发+小程序实战视频+工具+源码

jQuery EasyUI编辑DataGrid用combobox实现多级联动

微信小程序 wx.request(接口调用方式)详解及实例

基于dhtmlxtree构建动态维护树

Jupyter_关于长期序列预测NeurIPS 2021的自耦分解变压器的代码发布.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程