// 获取按钮元素 var addButton = document.getElementById('add-task'); // 为按钮添加点击事件监听器 addButton.addEventListener('click',function() { // 发送Ajax请求 var xhr = new XMLHttpRequest(); xhr.open('POST','/addTask',true); xhr.setRequestHeader('Content-Type','application/json'); // 处理服务器响应 xhr.onload = function() { if (xhr.status === 200) { // 获取任务列表的容器 var taskList = document.getElementById('task-list'); // 创建一个新的任务行 var newTaskRow = document.createElement('p'); newTaskRow.textContent = xhr.responseText; // 将新的任务行添加到任务列表中 taskList.appendChild(newTaskRow); } }; // 发送请求 xhr.send(JSON.stringify({task: 'New Task'})); });在上面的代码中,我们首先获取"添加任务"按钮元素,并为其绑定了一个点击事件监听器。当按钮被点击时,事件监听器内部的代码将被执行。 在事件监听器的代码中,我们首先创建了一个新的XMLHttpRequest对象,用于向服务器发送请求。我们使用POST方法发送请求,并设置请求头的Content-Type为application/json,因为我们将数据以JSON格式发送到服务器。 然后,我们定义了xhr的onload事件处理程序,用于处理服务器的响应。当服务器响应的状态码为200时,表示请求成功。在这种情况下,我们获取任务列表的容器元素,并创建一个新的任务行元素。将服务器响应文本设置为新的任务行元素的内容,并将新的任务行添加到任务列表中。 最后,我们调用xhr的send方法,发送请求到服务器。请求的内容为一个JSON对象,其中包含了要添加的新任务的内容。 通过上述代码,我们实现了一个通过Ajax增加相同数据行的功能。当用户点击"添加任务"按钮时,页面中的任务列表会立即实时更新,无需重新加载整个页面。 总结来说,通过使用Ajax可以实现增加相同数据行的动态更新效果。无论是增加任务行、评论行、还是其他类型的数据行,我们都可以通过监听特定事件,在不重新加载整个页面的情况下更新页面的部分内容。这大大提高了用户体验,使用户能够更加高效地与网页交互。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。