使用原生AJAX将后端响应数据打印至控制台

以下是一个使用原生AJAX将后端响应数据打印至控制台的示例代码： ``` // 创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); // 监听状态变化 xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { // 请求成功 console.log(this.responseText); } }; // 发送请求 xhr.open('GET', '/api/data', true); xhr.send(); ``` 在上面的代码中，我们首先创建了一个XMLHttpRequest对象，然后通过监听其onreadystatechange事件来获取响应数据。当状态码为4（即请求已完成）且状态为200（即请求成功）时，我们将响应数据打印至控制台。在发送请求之前，我们需要使用`xhr.open()`方法打开一个GET请求，其中第一个参数为请求方法，第二个参数为请求URL，第三个参数为是否异步发送请求。最后，我们使用`xhr.send()`方法发送请求。

使用原生AJAX将后端响应数据打印至HTML页面

以下是使用原生AJAX将后端响应数据打印至HTML页面的示例代码： HTML页面： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX Demo</title> </head> <body> <h1>AJAX Demo</h1> <button onclick="loadData()">Load Data</button> <div id="data"></div> <script src="script.js"></script> </body> </html> ``` JavaScript文件（script.js）： ```javascript function loadData() { // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方法和请求地址 xhr.open('GET', 'http://localhost:8080/data', true); // 设置响应数据类型为JSON xhr.setRequestHeader('Content-Type', 'application/json'); // 注册响应事件处理函数 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { // 获取响应数据并将其打印至HTML页面 var data = JSON.parse(xhr.responseText); var div = document.getElementById('data'); div.innerHTML = '<p>' + data.message + '</p>'; } else { console.error('Error: ' + xhr.status); } } }; // 发送请求 xhr.send(); } ``` 在上面的示例代码中，我们使用了XMLHttpRequest对象来发送HTTP请求并获取响应数据。我们首先创建了一个XMLHttpRequest对象，然后设置请求方法和请求地址，并通过setRequestHeader()方法设置了响应数据类型为JSON。接着，我们注册了onreadystatechange事件处理函数，该函数会在请求状态发生变化时被调用。在该函数中，我们首先判断请求状态是否为XMLHttpRequest.DONE，如果是，则进一步判断响应状态是否为200。如果响应状态为200，则说明请求成功，并可以通过responseText属性获取响应数据。我们将响应数据解析为JSON格式，并将其打印至HTML页面中的一个指定的div元素中。如果响应状态不为200，则说明请求失败，我们在控制台中打印出错误信息。最后，我们调用send()方法发送请求。当用户点击HTML页面中的按钮时，我们会调用loadData()函数来发送请求并获取响应数据。

使用原生AJAX完成任意异步交互效果（例：登录页面验证；在页面上打印ＪＳＯＮ文件；或将后端响应数据打印至控制台）。附上代码及效果截图。

以下是使用原生AJAX实现登录页面验证的例子： HTML代码： ```html <form> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <br> <button type="submit" id="submit-btn">登录</button> </form> <div id="result"></div> ``` JS代码： ```javascript const form = document.querySelector('form'); const result = document.getElementById('result'); form.addEventListener('submit', event => { event.preventDefault(); // 阻止表单默认提交行为 const username = document.getElementById('username').value; const password = document.getElementById('password').value; const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/login'); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.onload = () => { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); result.innerText = data.message; } else { result.innerText = '登录失败，请重试！'; } }; xhr.onerror = () => { result.innerText = '网络错误，请检查网络连接！'; }; xhr.send(JSON.stringify({username, password})); }); ``` 效果截图： ![login-page-validation](https://i.loli.net/2021/06/18/oPbNvYfL3ZaA5xk.png)

使用原生AJAX将后端响应数据打印至控制台

使用原生AJAX将后端响应数据打印至HTML页面

使用原生AJAX完成任意异步交互效果（例：登录页面验证；在页面上打印ＪＳＯＮ文件；或将后端响应数据打印至控制台）。附上代码及效果截图。

相关推荐

原生ajax处理json格式数据的实例代码

基于原生ajax与封装的ajax使用方法(详解)

原生ajax使用

vue3ajax获取后端数据

可以使用ajax向后端发送请求，并将FormData作为参数传递。

使用ajax给后端php提交表单

前端获取后端的数据并且打印select

vue2使用原生ajax

使用原生ajax进行提交实例详解

使用原生ajax完成任意异步交互效果 java

使用原生ajax发送post请求

jsp中ajax请求后端接口

使用原生AJAX完成任意异步交互效果

原生php ajax post_使用原生ajax发送post请求完整案例

使用原生AJAX完成任意异步交互效果servlet部分

asp.net web程序怎么直接将后端数据显示到前端

使用原生AJAX完成登录页面验证异步交互效果servlet

最新推荐

原生JS发送异步数据请求

jsp中利用jquery+ajax在前后台之间传递json格式参数

Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法

基于云原生DevOps能力编排平台PDF高清无水印

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

管理建模和仿真的文件

：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章

info-center source defatult

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

"互动学习：行动中的多样性与论文攻读经历"