AJAX-服务端响应JSON数据

最新推荐文章于 2024-04-26 19:58:57 发布
最新推荐文章于 2024-04-26 19:58:57 发布
阅读量382 收藏
点赞数
分类专栏： Ajax 文章标签： json ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124752871
版权

文章目录

实例

eg：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>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 键盘按下事件
        window.onkeydown=function (){
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化类型与URL
        xhr.open('GET','http://127.0.0.1:8000/json-server')
        // 发送
        xhr.send()
        // 事件绑定
        xhr.onreadystatechange = function (){
            // 注意是：readyState
           if(xhr.readyState === 4){
               if(xhr.status>=200 && xhr.status<300){
                   console.log(xhr.response)
                   result.innerHTML = xhr.response
               }
           }
        }
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX JSON')
})
// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中……')
})

输出：
在这里插入图片描述
如果服务器端的响应数据发生改变，浏览器端再按键盘的时候出现的就是改变后的数据，即实现了不更新页面数据的更新。

服务器端响应传回数据

服务器端的响应语句：response.send（'响应字符串'）
该响应语句只能传递字符串，所以想要将对象等其他数据类型传回前端，需要向将数据转换成字符串的类型。

手动转换

eg：
server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应数据
    const data = {
        name: 'yang',
        // age:18
    }
    // 数据类型转化
    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>Document</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px;
        }
    </style>
</head>
<body>
    <div id = 'result'></div>
    <script>
        // 获取元素
        const result = document.getElementById('result')
        // 键盘按下事件
        window.onkeydown=function (){
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化类型与URL
        xhr.open('GET','http://127.0.0.1:8000/json-server')
        // 发送
        xhr.send()
        // 事件绑定
        xhr.onreadystatechange = function (){
            // 注意是：readyState
           if(xhr.readyState === 4){
               if(xhr.status>=200 && xhr.status<300){
                   let data = JSON.parse(xhr.response);
                   console.log(data);
                   result.innerHTML = data.name;
               }
           }
        }
        }
    </script>
</body>
</html>

输出：
在这里插入图片描述

自动转换

前端获取到响应数据之后还需要通过JSON的方法将数据手动转换成前端能使用的数据。
但是也可以借助 AJAX自带的属性（responseType）进行自动转换。

eg： xhr.responseType = “json”;
告诉ajax从后端出回来的响应数据是json类型的ajax就会自动进行解析。

那上述的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>Document</title>
    <style>
      #result {
        width: 200px;
        height: 200px;
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
    <script>
      // 获取元素
      const result = document.getElementById("result");
      // 键盘按下事件
      window.onkeydown = function () {
        // 创建对象
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        // 初始化类型与URL
        xhr.open("GET", "http://127.0.0.1:8000/json-server");
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function () {
          // 注意是：readyState
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
            //   let data = JSON.parse(xhr.response);
            //   console.log(data);
            //   result.innerHTML = data.name;
            result.innerHTML = xhr.response.name;
            
            }
          }
        };
      };
    </script>
  </body>
</html>
_洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX 解析JSON数据格式
12-17
JSON（JavaScript Object Notation）是一种轻量...综上所述，JSON因其简洁、高效的特点在AJAX应用中广泛使用，尤其是在客户端和服务端之间的数据交换。JSON-lib工具包简化了Java开发者处理JSON的过程，提高了开发效率。
ajax提交json数据返回文件流下载excell
jamst
06-02 1505
ajax异步无法返回下载文件 可以通过添加from表单隐藏域的方式实现。 另外也想过直接js调用excell插件来生成文件学艺不精放弃了。 [b]Require:[/b] [code="java"] $(".feedback.button").click(function(){ var form = $(""); form.attr('style', 'dis...
JavaWeb-----Ajax异步请求 json对象 服务器如何返回json数据 使用ajax完成一个案例
BUG专业户
05-20 2730
ajax异步请求 json对象 服务器如何返回json数据 使用ajax完成一个案例
http请求和响应格式，Json
最新发布
2302_80182440的博客
04-26 429
Json语法中一个对象由一个大括号表示，对象的属性以键值对的的形式表示，键以 "" 引住；一个Http请求报文由请求行，请求头，和请求数据组成。Json反序列化：由json数据格式转换为java对象。Json序列化：由java对象转换为json数据格式。请求数据 ： 以键值对的形式表示请求参数的数据；请求头由键值对组成，以 键：值 的形式呈现；协议版本 状态码 状态码描述。响应头：内容为多个键值对，格式为 键：值；请求头的属性作为键，属性内容作为值；请求头和请求数据间有一行空行；一，http请求格式。
Ajax根据接口信息的关于json格式的解析
Wellfancy的博客
11-18 1256
Ajax根据接口信息的关于json格式的解析，以及获取村民信息的简单案例。
AJAX请求服务端响应JSON数据
Java_young_man的博客
03-24 2541
AJAX请求服务端响应JSON数据 在实际工作中向服务端发送请求，返回的结果绝大多数都是json格式的数据。 案例： 在窗口下按下键盘任意按键，便会向服务端发送一个请求，服务端返回结果在div中呈现。 前端页面 <style> #result{ width: 200px; height: 100px; border: solid 1px #89b; } </style> <b
【AJAX学习笔记四】ajax响应服务器端的JSON数据
weixin_46116626的博客
04-23 284
ajax响应服务器端的JSON数据+nodemon启动
jQuery Ajax异步处理Json数据详解
12-08
在处理 JSON 数据时，设置 `dataType` 为 `"json"` 会让 jQuery 自动解析响应内容。 接着，我们来看一个 ASP.NET 的实例。假设我们有一个包含 JSON 数据的数组：`[{“demoData”:”This Is The JSON Data”}]`，...
json-servlet-ajax
08-23
标题“json-servlet-ajax”暗示了我们讨论的重点是关于JSON如何在Servlet和AJAX之间进行数据传递。Servlet是Java中用于处理HTTP请求的服务端组件，而AJAX则允许网页在不重新加载整个页面的情况下与服务器交换数据并...
AJAX跨域请求JSONP获取JSON数据的实例代码
10-20
- **服务端响应**：服务器接收到请求后，生成一个JavaScript函数调用，格式为`jsonpCallback({data: 'your_data', moreData: 'additional_info'})`，并将这个字符串作为响应内容返回。 - **数据传递**：浏览器接收...
使用Ajax向PHP服务端发送请求并返回JSON数据
08-13
本文将深入探讨如何使用Ajax向PHP服务端发送请求，并接收JSON格式的数据。 Ajax的核心是JavaScript的XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下与服务器进行通信。以下是一个基本的Ajax请求示例： `...
ajax方法后面跟response,关于Ajax中通过response在后台传递数据问题
weixin_36342356的博客
08-05 934
AJAX 的 关于Ajax中通过response在后台传递数据问题这是js代码：var System = {getHttpRequest: function(url, callback, options) {if (url.length < 0) return;var option = {url: url,type: "get",dataType: "json",cache: false,t...
使用ajax请求后台生成数据返回JSON格式到前台使用
weixin_40927846的博客
01-31 3834
前台JS $.ajax({ type:"GET", url: contextPath + "/GetAllSubjectsServlet?date=" + new Date(), dataType:"json", success:function(result){ if(result){ ...
ajax调取json接口,通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
weixin_32452127的博客
08-05 1904
第一步：编写基础的 html 框架内容，并引入 jquery：测试Ajax第二步：在 “” 中间插入要点击的按钮和用来显示数据的标签，并编写对应的function：“ajax的使用往往配合事件操作进行调用”点击获取数据function：$(function(){$("#btn").on("click", function(){//调用 ajax});})第三步：使用 ajax 调用后台接口并处理...
ajax给后端传递json格式数据，请求直接cancele了
小糖豆
12-14 528
点击确定按钮，发出请求，点击确定，弹窗消息，请求也取消了，坑就在于，请求还没有返回，弹窗就消失了，所以请求也就取消了。解决办法就是在请求返回体中close这个弹窗。这是子页面中的ajax方法，等请求返回以后，在关闭弹窗，不然请求会中途取消，之前没问题的原因是之前请求很快返回了（在弹窗关掉之前），现在慢一些。这是请求父页面左边树的前端请求，点击短信发送会调用sendSms()方法、回调子页面中的submitHandler()方法。上面是后端接口接收请求的代码。
Ajax学习：服务端响应Json格式数据的请求
weixin_47295886的博客
11-29 1281
自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的。手动设置数据转换 json转对象JSON.parse(xhr.response);在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示。在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，这里的重点是：传递对象给客户端。
Ajax技术详解（二）JSON 详解
长夜漫漫，无心睡眠
05-11 1846
一.JSON 简介 1.介绍 JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅 读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。 2.为什么要使用 JSON 在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。 二.JSON
AJAX服务端响应json数据
苏樱的博客
09-22 155
AJAX服务端响应json数据 首先新建一个文件夹，里面放html文件和js文件 html文件里面放一个简单的按钮并为其绑定事件 html（json.html） <button>点击发送请求</button> <div id="result"></div> css #result { width: 200px; height: 100px; border: 1px solid #000;
Ajax --- 获取服务器端的响应
weixin_47505105的博客
03-09 1978
介绍了 获取 ajax 状态码 以及 如何使用 onreadystatechange事件获取服务器端响应
ajax json响应头
08-12
- *1* *2* *3* [Ajax学习：服务端响应Json格式数据的请求](https://blog.csdn.net/weixin_47295886/article/details/128087459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值