get방식은 주소로 넘김
쿼리파람
jquery09.html
<!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">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<!--
<button id="btn">에이젝스</button>
<script>
$("#btn").click(function(){
//ajax
$.ajax({
url:"http://localhost:8383/getAjax",//요청주소
type:"Post",//요청타입
data:JSON.stringify({num:20,id:"abs123",name:"앱솔"}), //보낼데이터
contentType:"application/json", //보내는 데이터에 대한 타입(필수)
dataType:"json",//json,xml,text,html,...등등(받는데이터에대한 타입)(옵션)
success:function(result){ //성공시 콜백
console.log(result);
},
error:function(err){//실패시 콜백
console.log(err);
}
})
})
</script>
-->
<hr/>
<input type="text" name="topic"/>
<button>get방식</button>
<script>
//버튼을 클릭하면 get방식으로 ajax처리를 합니다.
//getAjax2/토픽값 요청처리합니다.
//응답데이터는 "success"
$("input[name='topic']").next().click(()=>{
$.ajax({
url:"http://localhost:8383/getAjax2/"+$("input[name='topic']").val(),
type:"get",
contentType:"text/plain",
dataType:"text",
success:(result)=>{console.log(result)},
error:(err)=>{console.log(err)}
});
});
</script>
</body>
</html>-이때, siblings()등을 사용하여 배열로 값을 얻고 [인덱스번호]로 태그를 얻어 console.log로 찍어보면
-태그는 나오는데 fn.init이 아니다. 즉 이때부턴 제이쿼리 함수를 사용할 수 없게 된다.
STS
RestBasicController.java
//jquery - ajax실습
@CrossOrigin("*") //전부허용
@GetMapping("getAjax2/{topic}")
public String getAjax2(@PathVariable String topic){
//받은 데이터
System.out.println(topic);
return "success";
}
STS콘솔출력문
get방식 쿼리파람 값넘기기쿼리스트링으로하면
url:"경로?키="+값
또는
url:"경로"
data:{키:값}
'JQuery' 카테고리의 다른 글
| 230217 JQuery 플러그인 (0) | 2023.02.17 |
|---|---|
| 230217 JQuery 제이쿼리를 통한 비동기 통신 -$.ajax({ }) (0) | 2023.02.17 |
| 230217 JQuery 각종 이벤트 함수와 on() (0) | 2023.02.17 |
| 230217 JQuery 이벤트함수 -ready() (0) | 2023.02.17 |
| 230217 JQuery 노드제어 (0) | 2023.02.17 |
