Ajax中发送get、post请求以及服务端响应json数据

已于 2022-08-28 12:54:03 修改
阅读量1.1k 收藏 5
点赞数
分类专栏： JS 文章标签： ajax
于 2021-06-07 09:52:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/katherin_wanzi/article/details/117649916
版权
本文详细介绍了如何使用Ajax进行GET和POST请求，包括客户端的代码实现以及服务端响应JSON数据的过程。在GET请求中，客户端通过特定路由发送请求，服务器需配置相应路由。POST请求同样需要客户端和服务端的对应设置。当服务端返回数据时，Ajax能自动将xhr.response解析为JSON对象。
摘要由CSDN通过智能技术生成

1.发送get请求

get.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax Get 请求</title>
    <style>
        #result {
     
            width: 200px;
            height: 100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function() {
   
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定，处理服务端返回的结果
            //on 当...时候
            //readystate是xhr对象中的属性，表示状态0 1 2 3 4
            //change 改变
            xhr.onreadystatechange = function()
最低0.47元/天 解锁文章
_enzo
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax同步请求和异步请求，原生Ajax和JSON的GET和POST请求，封装，方法
骑着蜗牛行天下
07-20 973
Ajax同步请求和异步请求 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sXlzf7HN-1595230000395)(C:\Users\YangJian\Desktop\同步请求和异步请求.png)] Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页
AJAX请求（GET、POST、响应JSON）
四问四不知的博客
05-29 1053
序言 作为一个后端Java工程师，不能只关注于自己的一亩三分地，还是多了解一下前端的知识，更加有助于自己的开发，在理解上前后端的对接会更为平滑。 AJAX（Asynchronous JavaScript and XML） AJAX是异步的 JavaScript 和 XML的缩写。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 XML是可扩展标记语言（Extensible Markup Language）的缩写
java发送请求-二次开发-get请求json
weixin_51482243的博客
05-11 412
定义变量contentType，param包含{,如果条件为真就是json,如果条件为假就输出from格式。最后，get请求目前有三个请求参数，不能只返回handler（httpGet）,在每一步增加返回。原本是from表单的格式，增加了json格式，所以对请求的param格式进行判断。如果为空下面的就不执行了，如果有值，不用再执行空状态，减少1个else。因为json是带{,所以可以先写为param包含{},如果param包含{,，header是json格式。如果param为空则对url发送请求。
AJAX实例之发送POST请求、服务端响应JSON数据、请求超时与网络异常问题、取消请求问题、以及jQuery发送AJAX请求
m0_63374484的博客
04-03 2009
一、AJAX发送POST请求： <!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">
Ajax学习：服务端响应Json格式数据的请求
weixin_47295886的博客
11-29 1287
自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的。手动设置数据转换 json转对象JSON.parse(xhr.response);在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示。在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，这里的重点是：传递对象给客户端。
学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
伟庭的博客
01-22 1868
学习AJAX必知必会（2）~Ajax基本使用，设置请求行、请求体、请求头，服务端响应JSON数据
JavaScript 中使用Ajax进行网络请求响应JSON字符串数据
路宇的博客
01-03 1804
一、首先看服务端代码 const express = require('express'); const app = express(); app.get('/', (request, response) => { response.send('HELLO Android'); }); app.post('/server', (request, response) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control
Ajax--》Ajax的GET与POST请求操作
ztK63LrD的博客
10-13 4079
🏃‍♂️Ajax全称 Asynchronous JavaScript And XML，意思就是异步的JS 和 XML，通过Ajax可以在浏览器中向服务器发送异步请求。作用：获取服务器数据。效果在不刷新整个页面的情况下，通过一个url地址获取服务器的数据，然后进行页面的局部刷新。Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。思想：用户看，我就加载，用户不看，我就不加载。应用场景：评论加载更多、用户名登录验证、搜索框搜索数据提示......
GET ,POST，JSON请求响应
qq_48240947的博客
03-08 695
GET ,POST，JSON请求响应
使用Ajax向PHP服务端发送请求并返回JSON数据
08-13
总结起来，使用Ajax向PHP服务端发送请求并接收JSON数据涉及的主要步骤包括创建XMLHttpRequest对象、设置回调函数、打开连接、设置请求头、发送请求以及在服务端处理请求和返回JSON数据。理解这些步骤对于Web开发中的...
AJAX跨域请求JSONP获取JSON数据的实例代码
10-20
JSONP（JSON with Padding）是JavaScript中用于解决同源策略限制的一种技术，它允许Web应用程序进行跨域数据交互。在JavaScript中，XMLHttpRequest对象受到同源策略的约束，无法直接发起对不同源的HTTP请求。然而，...
服务端模拟ajax支持发起GETPOSTPUTDELETE请求
08-12
在IT行业中，服务端模拟AJAX请求是一种常见的测试和开发技术。这主要涉及到Web应用程序的交互，特别是客户端（浏览器）与服务器之间的异步数据通信。本文将深入探讨如何使用JavaScript来模拟GET、POST、PUT和DELETE...
jQuery的3种请求方式$.post,$.get,$.getJSON
12-09
在jQuery库中，$.post, $.get和$.getJSON是用于执行AJAX（Asynchronous JavaScript and XML）请求的三种主要方法，这些方法使得前端与后端服务器进行异步数据交互成为可能，无需刷新整个页面。接下来，我们将详细...
还是GET和POST的服务端和客户端的小案例
11-05
以上就是GET和POST请求在服务端和客户端交互中的基本知识，以及如何通过连接实现JSON数据的返回和获取。在实际开发中，还需要考虑安全性、性能优化、错误处理等问题，确保数据传输的可靠性和效率。
AjaX 数据爬取
qq_39217312的博客
07-25 1092
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
Vue.js 与 Ajax（vue-resource）的集成应用
lly202406的博客
07-25 513
Vue.js 是一款流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中，与后端服务的通信是不可或缺的，而Ajax技术是实现这一功能的关键。在Vue.js中，是一个常用的插件，它提供了一种简单的方式来执行Ajax请求。本文将详细介绍Vue.js与Ajax（通过vue-resource）的集成应用，包括安装、基本使用、进阶技巧以及实际开发中的最佳实践。
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
原生ajax请求传参类型
05-02
原生 AJAX 请求传参类型有两种：GET 和 POST。 GET 请求是通过 URL 传递参数，参数会被附加到 URL 后面，形成一个完整的 URL 地址。例如： ``` http://example.com/api/users?id=1&name=John ``` 这里的参数是 `id` 和 `name`，它们的值分别是 `1` 和 `John`。GET 请求的参数可以在浏览器的地址栏中看到，因此不适合传递敏感信息。 POST 请求是通过 HTTP 请求体传递参数，参数不会被附加到 URL 后面，因此相对更安全。POST 请求可以传递更大的数据量，比 GET 请求更适合传输数据。例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://example.com/api/users'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ id: 1, name: 'John' })); ``` 这里使用了 JSON 格式的数据作为请求体，通过 `JSON.stringify()` 将 JavaScript 对象转换为 JSON 字符串，再通过 `xhr.send()` 发送请求。在服务端，可以使用相应的方式解析 JSON 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值