[AJAX]原生AJAX——服务端如何发出JSON格式响应,客户端如何处理接收JSON格式响应

news/2024/4/15 8:26:52

服务端代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body></body>
<script>// 1、创建对象const xhr = new XMLHttpRequest();// 2、初始化:设置请求类型和urlxhr.open('POST', 'http://127.0.0.1:8000/server');// 设置请求头// Content-Type:设置请求体内容类型// application/x-www-form-urlencoded:请求参数的类型xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 3、发送:设置请求体(POST请求的参数)xhr.send("id:1&name:CUYG")// 4、事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}};
</script></html>

主要代码

// 第一步:设置发给客户端的JSON格式数据

    var data={

        code:200,

        msg:"成功"

    }

    // 第二步:由于response.send()只能发送字符串,所以要把JSON转换成字符串

    data = JSON.stringify(data)

    // 第三步:发送数据

    response.send(data);

根据上图表示客户端接收到数据,打印出的响应参数是字符串

 方法一:使用JSON.parse(xhr.response)把字符串转换为JSON

<script>// 1、创建对象const xhr = new XMLHttpRequest();// 2、初始化:设置请求类型和urlxhr.open('POST', 'http://127.0.0.1:8000/server');// 设置请求头// Content-Type:设置请求体内容类型// application/x-www-form-urlencoded:请求参数的类型xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 3、发送:设置请求体(POST请求的参数)xhr.send("id:1&name:CUYG")// 4、事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {console.log(JSON.parse(xhr.response));}}};
</script>

方法二:设置响应体数据类型:xhr.responseType="json"

<script>// 1、创建对象const xhr = new XMLHttpRequest();// 2、初始化:设置请求类型和urlxhr.open('POST', 'http://127.0.0.1:8000/server');// 设置请求头// Content-Type:设置请求体内容类型// application/x-www-form-urlencoded:请求参数的类型xhr.responseType="json"xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 3、发送:设置请求体(POST请求的参数)xhr.send("id:1&name:CUYG")// 4、事件绑定xhr.onreadystatechange = function () {// 判断if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);}}};
</script>

 


http://www.ppmy.cn/news/735538.html

相关文章

i5 1135g7和i7 10510u 哪个好

i5-1135G7 4 核 8 线程&#xff0c;主频 2.4GHz&#xff0c;睿频 4.2GHz&#xff0c;8MB 三级缓存。跑分方面&#xff0c;i5-1135G7 在 Geekbench 4 上单核最高 6046 分&#xff0c;多核最高 21469 分。 选i7 10510u还是 i5 1135g7这些点很重要!看完你就知道了 https://list.jd…

i5 10200h和i7 10750h 哪个好

i5-10200H的酷睿处理器&#xff0c;它采用4核心8线程&#xff0c;和我们熟悉的i5-10300H相比&#xff0c;默认主频从2.5GHz降为了2.4GHz&#xff0c;最高&#xff08;单核&#xff09;睿频加速频率从4.5GHz降为了4.1GHz&#xff0c;综合性能下降了大约10%不到&#xff0c;但却换…

i5-1135G7和i7-1165G7参数对比哪个好

i5-1135G7 4 核 8 线程&#xff0c;主频 2.4GHz&#xff0c;睿频 4.2GHz&#xff0c;8MB 三级缓存。跑分方面&#xff0c;i5-1135G7 在 Geekbench 4 上单核最高 6046 分&#xff0c;多核最高 21469 分。 选i5-1135G7和i7-1165G7搭配笔记本这些点很重要 https://list.jd.com/lis…

i5 1130g7和 i7 1160g7哪个好

i5-1130G7 4 核 8 线程&#xff0c;主频 2.4GHz&#xff0c;睿频 4.00GHz&#xff0c;8MB 三级缓存。跑分方面&#xff0c;i5-1130G7 在 Geekbench 4 上单核最高 5946 分&#xff0c;多核最高 20469 分。 选i5 1130g7还是 i7 1160g7 这些点很重要看过你就懂了 http://www.adian…

达人评测 i7 11390h和i5 11320h选哪个好

i7 11390H 属于Tiger Lake-H35系列为4核心8线程&#xff0c;三缓12MB&#xff0c;不过基频更高&#xff0c;达到了3.39GHz&#xff0c;。i7-11390H单核睿频最高可达5GHz&#xff0c;TDP在28-35W之间选i7 11390h还是i5 11320h这些点很重要http://www.adiannao.cn/dy i5-11320h参…

i5 11300h和i7 1165g7哪个好 i5 11300h和i71165g7的差距多大

i5-1135G7 4 核 8 线程&#xff0c;主频 2.4GHz&#xff0c;睿频 4.2GHz&#xff0c;8MB 三级缓存。跑分方面&#xff0c;i5-1135G7 在 Geekbench 4 上单核最高 6046 分&#xff0c;多核最高 21469 分。选i7 1165g7还是i5 11300h哪个好这些点很重要 http://www.adiannao.cn/dy …

亚马逊Web服务(AWS)的几个主要应用

以下是亚马逊Web服务&#xff08;AWS&#xff09;的几个主要应用&#xff1a; EC2&#xff08;弹性计算云&#xff09;&#xff1a;提供虚拟计算资源&#xff0c;可为应用程序和服务提供计算能力。 S3&#xff08;简单存储服务&#xff09;&#xff1a;提供高度可扩展和可靠的…

安装部署mysql

1.二进制方式安装 (1)下载压缩包 (2)创建用户和组 (3)解压 &#xff08;4&#xff09;创建软链接 (5)初始化 &#xff08;6&#xff09; 2.使用yum方式安装 (1)用yum install wget unzip bash-completion tree vim lrzsz net-tools -y命令安装常用软件 (2)用yum install mysql…

win10屏幕投影

不管是做设计还是看电影玩游戏编代码&#xff0c;多屏幕总是可以带来方便的。屏幕投影之前需要连接屏幕&#xff1a;通过VGA线连接、通过HDMI线连接、或者通过无线连接。 介绍Win10实现屏幕投影设置&#xff1a;https://jingyan.baidu.com/article/3a2f7c2e33280f26afd61184.ht…

w10投影全屏设置_win10如何让投影仪铺满全屏

win10如何让投影仪铺满全屏?很多用户使用投影仪没有铺满&#xff0c;上下有空隙&#xff0c;不是全屏显示的&#xff0c;不知如何设置的用户&#xff0c;接下来就由小编教大家win10系统投影仪铺满全屏的设置方法吧。 win10如何让投影仪铺满全屏?升级win10后&#xff0c;尤其是…

w10投影全屏设置_win10投影仪怎么铺满全屏|win10投影器全屏的设置方法

如果说win10投影仪怎么铺满全屏|win10投影器全屏的设置方法就由小编带领大家来认识一下&#xff0c;都说有些小伙伴们在使用win10投影设置的时候&#xff0c;会发现投影无法铺满全屏&#xff0c;这就令人非常头疼&#xff0c;也不知道具体的设置方法&#xff0c;针对这一问题&a…

Windows10系统上投影(仅电影屏幕,复制,拓展,仅第二屏幕)类型的作用

一: 场景 这几天需要使用到电脑的投屏功能,但是懒得找网上的投影软件,便使用windows自带投影工具,但是&#xff0c;发现系统自带的也分有四种类型&#xff0c;对这些类型不是很熟悉&#xff0c;一顿百度和操作后&#xff0c;将具体的理解整合成了本篇文章&#xff0c;以便记忆。…

android win10 投屏,安卓手机投影win10不成功,版本升级前可以

时间有点久&#xff0c;有点忘记了。 不知道你想怎么投屏&#xff0c;是只是将影片/电影投屏到WIN10里面还是说要将手机镜像投屏到系统里面&#xff1f; 我发这个问题时候&#xff0c;投屏电影到系统是没有问题的&#xff0c;只是手机镜像投不了&#xff0c;可以搜到电脑&#…

计算机无法投影,win10专业版投影失败提示:你的电脑不能投影到其他屏幕的解决办法...

win10专业版系统投影失败提示:你的电脑不能投影到其他屏幕 我们都知道 win10专业版系统更新之后&#xff0c;电脑可以直接利用Miracast协议与其他支出Miracast的设备进行多屏互动&#xff0c;但是有时候我们在使用 win10专业版系统电脑设置电脑投影的时候&#xff0c;弹出窗口显…

win10设置pin一直转圈_Win10 自带手机投屏功能,80% 的人居然都不知道

假期实在是太无聊了,天天玩手机都要无聊死了。 尤其是只带了笔记本电脑回家,现在的我无比怀念那个用大屏幕看电影的日子。 本来学霸君是打算用家里的电视的,然而爸妈要看电视。 于是假期里闲着没事的学霸君决定研究一下能不能将手机的屏幕投影到电脑上,毕竟电脑找电影资源要…

【手机投影】安卓手机投影到WIN10

安卓手机和WIN10都自带了投影功能&#xff0c;这个教程不需要任何第三方软件 在WIN10上搜索投影功能 设置每次都需要PIN码 可能会有多台手机和电脑同时使用此功能&#xff0c;PIN码是用来匹配的 打开投屏应用 在安卓上搜索投屏应用 连接WIN10投屏应用 输入PIN码 完成匹配

win10无线投屏_win8/win10笔记本无线投影到电视

win8/win10笔记本无线投影到电视 想要笔记本无线投影到电视怎么操作?大家都知道笔记本是自带WIFI功能,意味着笔记本可以通过WIFI直接链接电视机,所以今天就跟大家介绍基于WIN8以上的电脑系统都支持Miracast,所以给大家介绍直接投影。哪些通过APP什么的就下次再说。 链接步骤…

win10怎么隐藏桌面计算机,Win10隐藏秘技大公开

1月14日&#xff0c;随着微软正式停止对Win7系统的更新维护&#xff0c;越来越多的小伙伴开始将电脑升级到Win10平台。不过试来试去&#xff0c;总感觉和之前的Win7没啥两样&#xff0c;这传说中的“史上最强操作系统”究竟强在哪儿呢&#xff1f;其实Win10的美不在明处&#x…

win10桌面计算机怎么显示器,最新版:Win10计算机桌面屏幕投影到电视教程_Win10计算机如何将屏幕投影到电视...

在win10系统中添加了无线投影功能&#xff0c;该功能可以帮助我们将计算机的屏幕内容投影到电视上进行观看&#xff0c;从而使我们在观看视频或玩游戏时在视觉上更加舒适&#xff0c;但是许多用户不知道如何将屏幕从Win10电脑投射到电视上&#xff1f;接下来&#xff0c;我将向…

win10投影到此电脑显示灰色解决办法

如果win10投影到此电脑是灰色的&#xff0c;可能是因为没有安装这个功能&#xff0c;下面是解决办法&#xff1a; 打开设置->系统->投影到此电脑 点击可选功能 添加功能 安装无线显示器 安装完成后投影功能即可使用
最新文章