html_Ajax
Ajax 기본 골격/ .append/ .empty / Jquery img src 변경
반응형
#1. Ajax 기본 골격
Ajax 기본 골격의 "URL을입력" 부분에 URL을 입력하여 데이터를 받아온다
$.ajax({
type: "GET",
url: "URL을입력",
data: {},
success: function(response){
console.log(response) //여기에 코드를 입력
}
})
코드를 입력하는 부분에 코딩을 진행한다.
console.log(response) 로 페이지의 내용을 출력하고
원하는 부분을 가져와 if문 등의 조건으로 코딩해보자
success: function (response) {
// console.log(response)
let rows = response['RealtimeCityAir']['row']
for (let i = 0; i < rows.length; i++) {
// console.log(rows[i])
let gu_name = rows[i]['MSRSTE_NM']
let gu_mise = rows[i]['IDEX_MVL']
// console.log(gu_name,gu_mise)
let temp_html = ``
if (gu_mise > 110) {
temp_html = ` <li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = ` <li >${gu_name} : ${gu_mise}</li>`
}
// console.log(temp_html)
$('#names-q1').append(temp_html)
}
}temp_html 에 항목의 폼을 사용할 땐 ` ` 를 사용한다. (숫자 1키 옆 ~키)
항목에 변수를 넣을 땐 ${ } 괄호 안에 작성한다.
#2. .append 사용하여 내용 추가하기
마지막으로 작성된 내용 아래 붙여 넣을 땐
.append 를 사용한다 : target의 마지막에 source를 출력 하는 코드
$('#target').append(source)
#3. .empty 로 중첩내용 삭제해주기
버튼 누를 때 마다 중첩되는 내용 초기화를 위해
.empty() 구문을 $.ajax 구문 전에 입력 해준다.
$('#names-q1').empty()
$.ajax({
})
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
#4. Jquery img src 변경
Jquery를 이용한 <image src="{경로}" /> 의 경로를 변경
src 속성을 변경하여 이미지를 변경한다.
불러올 이미지를 변수에 저장한 뒤
바디의 이미지가 있는 곳 id를 불러와 .attr('src',imgul) 입력하기
예) [변수 : imgul / 이미지 response[0]['name']
let imgul = response[0]['name']
$('#id_name').attr('src',imgul)
<script>
function q1() {
$.ajax({
type: "GET",
url: "URL 입력",
data: {},
success: function (response) {
// console.log(response[0]['URL]) //여기에 코드를 입력
let imgurl = response[0]['url']
$('#img').attr('src',imgurl)
}
</script>
</head>
<body>
<h1>JQuery+Ajax 이미지 src 변경하기</h1>
<hr/>
<div class="question-box">
<button onclick="q1()">버튼 누르기 </button>
<div>
<img id="img" src="이미지 URL 넣기 "/>
</div>
</div>
</body>
반응형
댓글