首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Vanilla JS中发送AJAX post请求和接收回JSON数据?

在Vanilla JS中发送AJAX post请求并接收回JSON数据的方法如下:

  1. 创建一个XMLHttpRequest对象:
代码语言:txt
复制
var xhr = new XMLHttpRequest();
  1. 设置请求的方法、URL和异步标志:
代码语言:txt
复制
xhr.open("POST", "请求的URL", true);
  1. 设置请求头,指定发送的数据类型为JSON:
代码语言:txt
复制
xhr.setRequestHeader("Content-Type", "application/json");
  1. 定义请求完成后的回调函数:
代码语言:txt
复制
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理返回的JSON数据
  }
};
  1. 将数据转换为JSON字符串并发送请求:
代码语言:txt
复制
var data = {
  key1: value1,
  key2: value2
};
xhr.send(JSON.stringify(data));

完整的示例代码如下:

代码语言:txt
复制
var xhr = new XMLHttpRequest();
xhr.open("POST", "请求的URL", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理返回的JSON数据
  }
};
var data = {
  key1: value1,
  key2: value2
};
xhr.send(JSON.stringify(data));

这种方法可以在Vanilla JS中发送AJAX post请求并接收回JSON数据。在实际应用中,可以根据具体的业务需求进行相应的参数配置和数据处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTTP协议学习

uid=10 HTTP/1.1 客户端想获取10号用户 ⑤.GET /user/10 HTTP/1.1 客户端想获取10号用户 (2).POST:客户端想“邮寄/上传/添加”指定的数据给服务器,相关数据在请求主体...(1).优化数据库 (2).优化php (3).优化web服务器(apache/nginx) (4).网速 (5).传输数据 (6).浏览器解析速度(html/css/js) 下面从http请求和响应角度考虑相关优化...and xml,该技术由google 推出,最大不同:发送求和接收数据都由Js完成,以下为Ajax代码固定Js,请求并且接收响应4步: (1).创建ajax对象 var xhr = new XMLHttpRequest...,true); (4).发送请求消息 xhr.send(null); 17.Ajax原理 (1).2002年由Google搜索引擎,提出建议 AJAX=HTML/CSS/JS/DOM/XML/HTTP...: JAVA => {JSON}=>html/js/css C# => {JSON}=>html/js/css php => {JSON}=>html/js/css 23.JSON与XML字符串格式概述

6.6K10

SpringMVC—Ajax使用

Ajax的核心是XMLHttpRequest对象(XHR){内置对象},XHR为服务器发送求和解析服务器响应提供了接口,能够以异步方式从服务器获取新数据 简介 AJAX = Asynchronous...可以做: 注册时,输入用户名自动检测用户是否已经存在 登录时,提示用户名密码错误 删除数据行时,将行id发送到后台,后台在数据删除,数据库删除成功后,子啊页面DOM中将数据行删除 … jQuery.ajax...Ajax的核心时XMLHttpRequest对象(XHR),XHR为服务器发送求和解析服务器响应提供了接口,能够以异步方式从服务器获取新数据 jQuery Ajax本质就是 XMLHttpRequest...,对他进行了封装,方便调用 通过 jQuery AJAX 方法,能够使用HTTP GEt和HTTP post 从远程服务器上请求文本,HTML,XML或JSON-同时 能吧这些外部数据直接载入网页的被选元素...部分参数: url:请求地址 type:请求方式,GET、POST(1.9.0之后用method) headers:请求头 data:要发送数据 contentType:即将发送信息至服务器的内容编码类型

1.6K10

jQueryAjax

请求的文件时,直接点击该图标运行 本环境自动以打开的本文件夹作为服务器的根目录,端口可以自行改变 jQueryAjax GET请求和POST请求的异同 相同点: 都是将数据提交到远程服务器 不同点...提交数据大小限制不同 GET请求对数据有大小限制 POST请求对数据没有大小限制 js原生Ajax <!.../data/ajaxTest.json",//请求和发送数据地址 type: "get",//请求方式 data:{"username":...userNname,"password":password},//要发送给后台的数据,可以在后台接收 dataType: "json", //返回数据类型...-- 本来表单数据应该发送到后台进行数据操作,由于还没有学习后端语言,先在前端调用后端的数据进行数据操作 --> <form action="" method="<em>POST</em>" role="form

1.2K60

Java学习笔记-全栈-web开发-10-Ajax&JSON&Axios

当你在百度搜索栏输入一些内容后,下面就出现一些候选相关选项,这就是ajax实现的:没有重载页面,但是更新了数据 1.2 XMLHttpRequest 对象 XMLHttpRequest 是 AJAX...1.2.3 获取响应数据 通过request.responseText获取 1.3 案例(GET) 1.3.1 html页面 form表单不通过action发送请求,而是通过提交触发js代码,在js发送异步请求...1.4 案例(POSTajaxpost请求流程 a.创建请求对象 b.连接 c.设置content-type请求头,如果不设置请求头,发送请求会失败 d.发送请求,传递请求参数 e.接收响应 POST...跟GET差不多,区别就在于 需要设置content-type请求头 在send发送参数,而不是拼接在url后面 1.4.1 jsajax ?...特性: 从浏览器创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据

1.7K20

30分钟全面解析-图解AJAX原理

一、什么是 AJAX  1.为什么需要AJAX 当需要从服务器获取数据,并刷新页面的操作,如果不采用AJAX,则需要用提交整个表单的方式,当提交表单时,发送请求给服务器,页面需要等待服务器发送完response...在传输过程,我们可以看下HTTP Headers。 三、AJAX提交请求和服务响应的原理 1.代码 客户端HTML代码: <!...在传输过程,我们可以看下HTTP Headers: 7.AJAX  GET和POST方式区别 AJAX发送求和POST发送请求的代码如下: //GET方式 function testGet() {...3.POST 可以用send方法发送额外信息。发送的信息存放在content 4.Post方式需要指定Request Header的类型。Get方式不需要指定。...;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等 4.可能破坏浏览器后退按钮的正常行为; 5.一些手持设备(手机、PAD等)自带的浏览器现在还不能很好的支持Ajax

3.2K121

jQuery Ajax 全解析

(可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL。...其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 .ajax。...如果通过 getScript 加入脚本,加入延时函数。 这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码: 加载并执行 test.js。...jQuery 1.2 ,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时, "myurl?callback=?"..."json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时, "myurl?callback=?" jQuery 将自动替换 ?

9.5K10

前端面试ajax考点汇总_javascript常见面试题

在传统的Javascript编程,如果想得到服务器端数据库或文件上的信息,或者发送客户端信息到服务器,需要建立一个HTML form然后GET或者POST数据到服务器端。...后台进行的发送求和接受响应。...在 Ajax应用中信息是如何在浏览器和服务器之间传递的 通过XML数据或者字符串 8、在浏览器端如何得到服务器端响应的XML数据。...在不同域名下的请求无法实现, 如果说想要请求其他来源的js文件,或者json数据,那么可以通过jsonp来解决 29、Ajax的最大的特点是什么。...Jsonp并不是一种数据格式,而json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,具体是通过动态创建script标签,然后通过标签的src属性获取js文件js脚本,该脚本的内容是一个函数调用

4.7K30

Ajax

(异步)或 false(同步) (一般为true,因ajax的精髓就是异步) */ xmlHttp.open("GET||POST","url (....//如果出现中文也可以用encodeURIComponent方法转换 // POST方式的url不能在后面字符串传递参数 xmlHttp.setRequestHeader("Content-type...但是对象和数组是比较特殊且常用的两种类型: //JSON 键/值对 //JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合的键名写在前面并用双引号 "" 包裹...方法, 但是可以使用json2.js这个框架来兼容 json2.js下载地址: PHP基本JSON格式 echo file_get_contents(" JSON文件地址 (..../json.txt)"); 跨域 ajax的请求过程:ajax发送请求–浏览器–服务器 响应过程则是请求过程的颠倒 当ajax发送请求到浏览器,浏览器发送到服务器,处理并响应后,原路返回到浏览器,此时会验证其请求来源的域名跟发送请求时是否一样

5.9K10

一篇文章带你了解axios网络交互-Vue

axios是基于Promise的HTTP库,可以用在浏览器和node环境,在应用程序,向服务器端发送Ajax请求同时获取服务器端相应的HTTP请求响应库。 我们为什么使用它呢?它的好处有哪些。...可以单独使用,支持Promise API,解决了JavaScript“回调地狱”的问题,可以发送Cookie,HTTP认证,并发请求,请求和响应的拦截,取消请求等,自动转换json数据,适用于restful...在vue通过Ajax从服务器端获取数据,前后端分离,后端负责提供api请求接口,前端用Ajax获取服务器数据。服务器端的api接口,一般使用restful api。...res=>{ app.users = res.data.data; }); } 在vue文件中使用axios,引入vue.js文件和axios.js文件,使用axios发送Ajax请求。...一般分:发送GET请求,和发送POST请求: GET传递,请求参数有两种写法,一种是直接在url附加参数,一种是使用parmas属性添加GET参数。

96610

前端必知的ajax

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL。...其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。...如果通过 getScript 加入脚本,加入延时函数。 这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码: 加载并执行 test.js。...jQuery 1.2 ,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时, "myurl?callback=?"..."json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时, "myurl?callback=?" jQuery 将自动替换 ?

3K40

AJAX常见面试问题

那你能说说封装好的 ajax里的几个参数吗 ? url: 发送请求的地址。 type: 请求方式(post或get)默认为get。 async: 同步异步请求,默认true所有请求均为异步请求。...数据 如果怎么处理 他的格式 你以前工作中有没有固定格式 如果我发送一个请求 删除数据里的一条数据 我怎么知道删除成功了 或者说 删除后 会在哪里显示 JSON.parse() 转换为JSON对象...并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。 .基于标准被广泛支持。...减少HTTP请求 2.  正确理解 Repaint 和 Reflow 3.  减少对DOM的操作 4.  使用JSON格式来进行数据交换 5.  高效使用HTML标签和CSS样式 6.  ...发现本站有涉嫌侵权/违法违规的内容, 发送邮件至 举报,一经查实,本站将立刻删除。

1.8K20

AJAXJSON

/server/slider.json", true) GET与POST的区别 与POST相比,GET 更简单也更快,并且在大部分情况下都能用,然而,在以下情况,必须使用POST请求: 无法使用缓存文件...(更新服务器上的文件或数据库) 向服务器发送大量数据(POST没有数据量限制) 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠 同步与异步的区别 同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事...如何添加HTTP头 如果需要像HTML表单那样POST数据,需使用setRequestHeader()来添加HTTP头,然后在 send() 方法规定希望发送数据 语法:xmlHttp.setRequestHeader...也可以是复杂数据类型的值 JSON对象的键名必须放在双引号里面,因为JSON不是javascript语句,所以没有末尾的分号 说明︰同一个对象不应该出现两个同名属性 数组 数组也是一种复杂数据类型,...如何在JQuery中使用JSONP呢,很简单,加个参数和改下数据返回类型 -> jsonp 、 dataType $.ajax({ url: "https://class.imooc.com/api

2.6K20

史上最详细Ajax学习笔记

data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。 callback:当请求成功后的回调函数,可以在函数编写我们的逻辑代码。...data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。 callback:当请求成功后的回调函数,可以在函数编写我们的逻辑代码。...data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。 type:请求方式,POST 或 GET (默认是 GET)。...data:发送给服务器端的请求参数,格式可以是key=value,也可以是 js 对象。 callback:当请求成功后的回调函数,可以在函数编写我们的逻辑代码。...data:发送到服务器的数据,可以是键值对形式,也可以是 js 对象形式。 type:请求方式,POST 或 GET (默认是 GET)。

1.9K10
领券