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 端口监听中....");
});

在这里插入图片描述

  • 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>
  • 按下键盘时就会返回响应体,是一个JSON格式字符串

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

目录
相关文章
|
9月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
|
3月前
|
JSON 前端开发 数据库连接
AJAX响应状态
【10月更文挑战第29天】了解和正确处理各种AJAX响应状态码是开发高效、稳定的Web应用程序的重要环节。通过对不同状态码的判断和相应处理,可以为用户提供更好的交互体验,确保应用程序在各种情况下都能正确地响应用户的操作。
|
3月前
|
XML 前端开发 JavaScript
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
84 3
|
9月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
4月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
84 0
|
4月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
138 0
|
5月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
281 2
|
6月前
|
前端开发 JavaScript UED
🎬JSF 与 Ajax:打造瞬间响应的魔法界面!🚀 用户输入即刻,数据交互如梦幻泡影般呈现!
【8月更文挑战第31天】在现代Web应用中,异步数据交互是提升用户体验的关键。JavaServer Faces (JSF) 作为标准Java Web框架,结合Ajax技术,可轻松实现页面异步更新与数据交互。本文通过示例代码介绍如何在JSF中使用Ajax组件(如`f:ajax`)及后端处理方法实现异步功能,并结合JavaScript处理复杂交互,帮助开发者提升Web应用体验。
57 0
|
8月前
|
JSON 数据格式 Python
python3 服务端使用CGI脚本处理POST的Json数据
python3 服务端使用CGI脚本处理POST的Json数据
93 6