반응형
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id = "app">
<button @click="getQuery()"> get </button>
<br>
<button @click="postQuery()"> post </button>
<br>
<button @click="ajaxGetQuery()"> ajaxGet </button>
<br>
<button @click="ajaxPostQuery()"> ajaxPost </button>
</div>
<script>
var vm = new Vue({
el : "#app",
methods:{
getQuery(){
$.get("https://www.w3schools.com/Jquery/demo_test.asp", function(data, res){
alert("data : " + data + " status : " + res);
})
},
postQuery(){
$.post("https://www.w3schools.com/Jquery/demo_test_post.asp",
{
name: "crocus",
city: "www.crocus.co.kr"
},
function(data, res){
alert("data : " + data + " status : " + res);
});
},
ajaxGetQuery(){
$.ajax({
url: "https://www.w3schools.com/Jquery/demo_test.asp",
type: 'GET',
dataType: 'text',
headers: {
},
success: function(data, status){
alert("data : " + data + " status : " + status);
},
error: function (e){
alert("error : " + e);
}
});
},
ajaxPostQuery(){
$.ajax({
url: "https://www.w3schools.com/Jquery/demo_test_post.asp",
type: 'POST',
dataType: 'text',
headers: {
},
data: {
name: "crocus2",
city: "www.crocus.co.krrrr"
},
success: function(data, status){
alert("data : " + data + "status : " + status);
},
error: function(e){
alert("error : " + e);
}
});
}
}
})
</script>
</body>
</html>
위에서 get/post를 위한 링크는 w3schools를 이용하였다.
$.get 혹은 $.post로도 get post가 가능하고 $.ajax로 type을 지정하면 get post가 가능해진다.
ajax는 비동기 요청으로 쓰이게 되고 간단한 설명은 다음과 같다.
$.ajax({
url: 'example.php' // 요청 할 주소
async: true, // false 일 경우 동기 요청으로 변경
type: 'POST' // GET, PUT
data: {
Name: 'ajax',
Age: '10'
}, // 전송할 데이터
dataType: 'text', // xml, json, script, html
beforeSend: function(jqXHR) {}, // 서버 요청 전 호출 되는 함수 return false; 일 경우 요청 중단
success: function(jqXHR) {}, // 요청 완료 시
error: function(jqXHR) {}, // 요청 실패.
complete: function(jqXHR) {} // 요청의 실패, 성공과 상관 없이 완료 될 경우 호출
});
출처 :: http://webinformation.tistory.com/22
반응형
'Basic > Jquery' 카테고리의 다른 글
| Tistory 메뉴에서 구분자 만들기 (0) | 2019.11.08 |
|---|---|
| Jquery를 이용한 특정 href 속성을 가진 element 찾기 (0) | 2019.11.04 |
| Jquery attr 메서드를 쓸 때 조심할 점 (0) | 2019.09.18 |
| jquery를 이용한 slider (0) | 2018.08.21 |
| Jquery를 이용한 show, hide, toggle (0) | 2018.08.16 |