首页原生ajax获取json数据并显示

原生ajax获取json数据并显示

时间: 2024-05-04 20:20:03 浏览: 73

你可以使用原生的 XMLHttpRequest 对象来获取 JSON 数据，并将其显示在页面上。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>显示 JSON 数据</title> </head> <body> <div id="output"></div> <script> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); var output = document.getElementById("output"); output.innerHTML = "<pre>" + JSON.stringify(data, null, 2) + "</pre>"; } }; xhr.open("GET", "data.json", true); xhr.send(); </script> </body> </html> ``` 在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，并指定了一个回调函数，该函数在请求完成后被调用。在回调函数中，我们首先检查了请求的状态和状态码，确保请求成功。然后，我们将响应文本解析为 JSON 对象，并将其显示在页面上。最后，我们通过调用 `xhr.open()` 方法和 `xhr.send()` 方法来发送 AJAX 请求。请注意，上面的示例假设我们有一个名为 `data.json` 的 JSON 文件，其中包含要显示的数据。你需要将 `xhr.open()` 方法的第一个参数更改为你自己的 URL。

阅读全文