Ajax异步请求，获取本地json数据

本文介绍: Aja x的核心是XMLHt t pReques t 对象。2、jQue ry的Aja x 请求。

/*
let xhr=new XMLHttpRequest();
(1)XMLHttpRequest 对象方法
方法 描述
newXMLHttpRequest() 创建新的XMLHttpRequest对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method,url,async,user,psw) 规定请求 method:请求类型;GET或POSTurl:文件位置;async:true(异步)或false(同步);user:可选的用户名称;psw:可选的密码
send() 将请求发送到服务器,用于GET请求
send(string) 将请求发送到服务器,用于POST请求
setRequestHeader() 向要发送的报头添加标签/值对
(2)XMLHttpRequest对象属性
属性 描述
onreadystatechange 定义当readyState属性发生变化时被调用的函数
readyState 保存XMLHttpRequest的状态。0:请求未初始化;1:服务器连接已建立;2:请求已收到;3:正在处理请求;4:请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以XML数据返回响应数据
status 返回请求的状态号 200:"OK";403:"Forbidden";404:"NotFound"
statusText 返回状态文本(比如"OK"或"NotFound")
*/

//创建xhr对象
let xhr = new XMLHttpRequest();
// 准备发送，语法:xhr.open('请求方式get/post','url地址',boolean); 默认boolean:true:异步请求
xhr = open('get', '路径.php', 'true')
//发送 send（）get请求send()
xhr.send();
// 监听函数，函数的功能：监听当前Ajax请求进行到哪一步，只有响应数据才能渲染数据
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {//响应数据
        if (xhr.status === 200) {//http协议状态 200成功 404资源不存在
            console.log(xhr.responseText);//返回的数据字符串格式
        }
    }
}

2、jQue ry的Ajax请求

$.ajax({
	type:"get/post",//请求的方式
	url:"xxxx",//请求接口(请求的地址)
	data:{//发送给后台(接口)的数据,没有参数的时候可以省略
					后台接受的变量:前端传递值,....
	},
	dataType:"json/xml/text/html/js",//返回的数据类型格式  JSON.parse()
	async:"true",//是否是异步的。不加默认是异步
	success:function(res){
        //请求成功的函数 res形参--后台返回的数据
	},
	error:function(error){
        //请求失败  error形参失败类型 
	},
	beforeSend:function(){
        //请求成功之前执行的函数
	},
	complete:function(){
        //请求完毕 不管成功还是失败都执行
	},
})

3、axios请求

1.安装
npm install axios
2.引入axios
	1.可以直接使用组件内使用
	import axios from 'axios'
	2.挂载全局使用
	main.js核心入口文件
	import axios from 'axios'
	//所有组件都可以使用
	Vue.prototype.$axios = axios;
	所有组件实例都可以访问
	this.$axios.get()/post()
	3.二次封装axios
	//二次封装的
	import axios from './utils/request'
	Vue.prototype.$axios = axios;//二次封装的
3.使用axios
    axios({
	method: 'post',
	maxBodyLength: Infinity,
	url: XXXXXX,
	headers: {},
	data: {
	    data1,
	    data2
	},
    }).then(res=&gt;{
        // 成功
    }).catch(err=&gt;{
        // 失败
    })

请求本地 json 文件数据地址需要改为本地路径

// 注意路径在框架中放到public文件目录下
axios.get("./data.json").then(res =>{
    console.log(res.data);
})

原文地址:https://blog.csdn.net/m0_73341533/article/de tails/129487400

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_40066.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复