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字符串转化为对应的对象的两种方式,有不当之处也可以在评论区指出哈~


目录
相关文章
|
1月前
|
JavaScript 前端开发
JS几种拼接字符串的方法
JS几种拼接字符串的方法
46 1
|
18天前
|
存储 JSON JavaScript
JavaScript JSON
【10月更文挑战第7天】JSON 是 JavaScript 中非常重要的一个数据格式,它为数据的表示和传输提供了一种简单而有效的方式。掌握 JSON 的使用方法和特点,对于开发高质量的 JavaScript 应用具有重要意义。
|
2月前
|
存储 JSON JavaScript
js中JSON的使用
介绍JSON的基本概念和在JavaScript中的使用方式,包括JSON格式的语法规则、使用`JSON.stringify()`和`JSON.parse()`方法进行对象与字符串的转换,以及处理JSON数组数据。
js中JSON的使用
|
9天前
|
数据采集 JavaScript 前端开发
JavaScript重定向对网络爬虫的影响及处理
JavaScript重定向对网络爬虫的影响及处理
|
1月前
|
JSON 前端开发 JavaScript
json字符串如何转为list对象?
json字符串如何转为list对象?
126 7
|
1月前
|
存储 JavaScript 前端开发
JavaScript 字符串(String) 对象
JavaScript 字符串(String) 对象
40 3
|
1月前
|
JSON JavaScript 前端开发
js如何格式化一个JSON对象?
js如何格式化一个JSON对象?
50 3
|
2月前
|
JavaScript 前端开发
javascript创建字符串
javascript创建字符串
|
2月前
|
JavaScript 前端开发
如何在JavaScript中替换字符串:一篇详细指南
如何在JavaScript中替换字符串:一篇详细指南
|
26天前
|
存储 资源调度 JavaScript
vue.js【网络请求和状态管理】
vue.js【网络请求和状态管理】