JavaScript 中使用Ajax进行网络请求响应JSON字符串数据

简介: JavaScript 中使用Ajax进行网络请求响应JSON字符串数据

一、首先看服务端代码

const express = require('express');
const app = express();
app.get('/', (request, response) => {
    response.send('HELLO Android');
});
app.post('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('HELLO Android POST');
});
app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'hello'
    };
    //对对象字符串进行转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});
app.listen(8000, () => {
    console.log("服务端已经启动,8000端口正在监听....");
});

服务端启动后,客户端使用Ajax进行网络请求,服务端返回JSON字符串数据,客户端需要将JSON字符串,转换为一个对象,通过对象便可取出对应的属性值,就是我们要的数据了,有两种方法,我们看以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #89B;
        }
    </style>
</head>
<body>
    <div id="result">
    </div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function() {
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        //1.手动对数据转化,将json字符串转换为一个对象
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        //2.自动转换 在前面需要设置响应体类型 xhr.responseType = 'json';
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

当按下键盘后,在浏览器便可看到相应的对象数据,如图所示:

以上就是将JSON字符串转化为对应的对象的两种方式,有不当之处也可以在评论区指出哈~


目录
相关文章
|
3月前
|
JavaScript 算法 前端开发
采招网JS逆向:基于AES解密网络数据
采招网JS逆向:基于AES解密网络数据
60 0
|
17天前
|
数据采集 JavaScript 前端开发
JavaScript重定向对网络爬虫的影响及处理
JavaScript重定向对网络爬虫的影响及处理
|
1月前
|
存储 资源调度 JavaScript
vue.js【网络请求和状态管理】
vue.js【网络请求和状态管理】
|
1月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
|
1月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
|
2月前
|
JSON 前端开发 JavaScript
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
Filter过滤器、Listener监听器、AJAX、 同步、异步优点和使用场景、Axios异步框架、JSON、js和JSON转换、案例,Axios + JSON 品牌列表查询和添加
JavaWeb基础8——Filter,Listener,Ajax,Axios,JSON
|
2月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
173 2
|
3月前
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
58 5
|
3月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
37 0
|
3月前
|
JavaScript 前端开发 UED
探索JavaScript的历史:网络需求初现、语言创立与标准化的旅程
探索JavaScript的历史:网络需求初现、语言创立与标准化的旅程