방법: 1. axios를 설치 및 도입하고 "axios([option])", "axios.get(url[,...])" 및 기타 방법을 사용하여 요청을 보냅니다. 2. vue-resource를 설치 및 도입하고 "this.$http.jsonp(url,[...])"를 사용하여 요청을 보냅니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
Vue 자체는 AJAX 요청 전송을 지원하지 않으며 이를 구현하려면 vue-resource, axios 및 기타 플러그인을 사용해야 합니다.
axios는 요청을 보내는 데 사용되는 Promise 기반 HTTP 요청 클라이언트입니다. 또한 vue2.0에서 공식적으로 권장되는 동시에 vue-resource는 더 이상 업데이트 및 유지 관리되지 않습니다.
vuejs의 ajax 사용 방법
1. axios 설치 및 소개
1) npm 방법: npm install axios -S
2) bower 방법: bower install axios
3) cdn 방법: <script src="%E2%80%9Dhttps://unpkg.com/axios/dist/axios.min.js%E2%80%9D"></script>
2. 기본 사용법
1) axios([options])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>axios发送ajax请求基本用法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="send">发送ajax请求</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
send(){
axios({
method:'get',
url:'user.json'
}).then(function(res){
console.log(res.data.name);
});
}
}
});
</script>
</body>
</html>
2) axios.get(url[,options]);
매개변수 전달 방법:
(1 ) 매개변수 전달 url을 통해 axios('url?key=value&key1=val2').then();
(2) params 옵션을 통해 매개변수 전달 axios('url',{params:{key:value}}).then( );
3) axios.post(url,data,[options]);
axios가 기본적으로 데이터를 보낼 때 데이터 형식은 일반적으로 사용되는 양식 데이터 형식이 아닌 요청 페이로드입니다.
따라서 매개변수는 다음과 같아야 합니다. 키 값으로 형식 전송의 경우 json 형식으로 전송할 수 없습니다.
매개변수 전달 방법:
(1) 키-값 쌍으로 직접 연결
axios.post(‘url’,’key=value&key1=value1’).then();
(2) 요청을 보내기 전에 변환 요청을 사용하여 요청 데이터를 변환
axios.post('url',data,{
transformRequest:[
function(data){
let params = '';
for(let index in data){
params +=index+'='+data[index]+'&';
}
return params;
}
]
}).then(function(res){
console.log(res.data)
});(3) 모듈식 개발을 사용하는 경우 , 변환을 위해 qs 모듈을 사용할 수 있습니다
axios 자체는 도메인 간 요청 전송을 지원하지 않으며 해당 API를 제공하지 않습니다. 작성자는 아직 axios에서 도메인 간 요청 전송 지원을 추가할 계획이 없습니다.
so 타사 라이브러리만 사용할 수 있습니다
교차 도메인 요청(vue-resource를 사용하여 교차 도메인 요청 보내기)
1 vue-resource를 사용하여 교차 도메인 요청을 보내는 단계
요청을 보내려면 this.$http.jsonp(url,[ops])를 사용하세요
2. 사용법 데모(360 검색)
1) 360 검색을 열고 'a' 문자를 입력하면 그림과 같이 일부 검색 옵션이 자동으로 표시됩니다 
2) 링크 복사
https://sug.so.360 .cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word =a
3) 코드 데모
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
params:{
word:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4) 결과
3. 기본 예제 데모(Baidu 검색)
1) 요구사항은 360 검색 요구사항과 동일합니다
2) 링크 복사
= 1526436420943”>https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1467 _21117_20927&req= 2&csor=1&cb=jQuery1102060305102784707 _1526436420940&=1526436420943
3) 코드 시연(참고) – 우선 시도해 보세요
위 코드를 작성하면 결과는 에러가 됩니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
}
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>결과는 에러가 됩니다
그럼 왜?
360도 검색 jsonp 콜백의 매개변수 이름이 callback 이고, 바이두에서 사용한 매개변수 이름이 cb 라서 오류가 보고됩니다
수정된 코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用vue-resource发送跨域请求</title>
<!--引入vue、vue-resource文件-->
<script src="vue.min.js"></script>
<script src="vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<button @click="sendJsonp">send</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sendJsonp:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:'a'
},
jsonp:'cb'
}).then(function(res){
console.log(res.data);
});
}
}
});
</script>
</body>
</html>4) 결과
4. Baidu 검색 사례 시연
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vuejs에서 ajax를 사용하는 방법列表</title>
<style>
.current{
background-color:#CCCCCC;
}
</style>
<!--引入vue、vue-resource文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
</head>
<body>
<script>
window.onload=function() {
new Vue({
el: "#app",
data: {
keyword: '',
myData:[],
now: -1
},
methods: {
getData(e) {
//如果按方向键上、下，则不发请求
if (e.keyCode == 38 || e.keyCode == 40)
return;
this.$http.jsonp(
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
params: {
wd: this.keyword
},
jsonp: 'cb'
}).then(function (res) {
console.log(res.data.s);
this.myData = res.data.s;
});
},
changeDown() {
this.now++;
this.keyword = this.myData[this.now];
if (this.now == this.myData.length) {
this.now = -1;
}
},
changeUp() {
this.now--;
this.keyword = this.myData[this.now];
if (this.now == -2) {
this.now = this.myData.length - 1;
}
}
}
});
}
</script>
<div id="app">
<input type="text" v-model="keyword"
@keyup="getData($event)" @keydown.down="changeDown"
@keydown.up.prevent="changeUp"
/>
<ul>
<li v-for="(val,index) in myData" :key="index"
:class="{current:index==now}"
>
{{val}}
</li>
</ul>
</div>
</body>
</html>관련 추천: "vue.js tutorial"
위 내용은 vuejs에서 ajax를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
