Ajax服务端响应JSON数据

简介: Ajax服务端响应JSON数据
  • 案例:当键盘上的按键被按下时,就会向服务端发送请求,服务端再返回结果,然后把返回的结果在下面的 div 中做一个呈现
  • express作为服务端响应
  • server.js
//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response)=>{

    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    //设置响应
    response.send("hello ajax")
});

// 可以接收任意类型的请求
app.all('/json-server', (request, response)=>{

    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');

    //响应一个数据
    const data = {
        name: 'xdr'
    };

    //对象进行字符串转换
    let str = JSON.stringify(data);

    //设置响应
    response.send(str)
});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000 端口监听中....");
});
AI 代码解读

在这里插入图片描述

  • JSON.html
<!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: solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            // console.log('test');
            //发送请求
            const xhr = new XMLHttpRequest();
            //初始化
            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;
                    }
                }
            }
        }
    </script>
</body>
</html>
AI 代码解读
  • 按下键盘时就会返回响应体,是一个JSON格式字符串

在这里插入图片描述

  • 手动方式对JSON字符串进行解析

在这里插入图片描述

  • 按下键盘后,就会把JSON字符串解析出来了

在这里插入图片描述

  • 也可以使用自动转换成JSON格式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

目录
打赏
0
0
0
0
169
分享
相关文章
如何在Python中高效实现CSV到JSON的数据转换
在实际项目中,数据格式转换是常见问题,尤其从CSV到JSON的转换。本文深入探讨了多种转换方法,涵盖Python基础实现、数据预处理、错误处理、性能优化及调试验证技巧。通过分块处理、并行处理等手段提升大文件转换效率,并介绍如何封装为命令行工具或Web API,实现自动化批量处理。关键点包括基础实现、数据清洗、异常捕获、性能优化和单元测试,确保转换流程稳定高效。
100 82
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
1月前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
41 12
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
217 0
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
75 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等