2021-06-16 ($.Ajax 사용하기)

<style>

.color{
color:red;
}
</style> => 자전거가 모여있는 갯수 5개이하시 전체 red컬러를 주기위한 클래스선언

 

 

function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function(response){
let rows = response["getStationList"]["row"];
for(let i=0 ; i<rows.length ; i++)
{
let sn = rows[i]['stationName'];
let rtc = rows[i]['rackTotCnt'];
let pbtc = rows[i]['parkingBikeTotCnt'];

if(pbtc<5) {
let temp_html = `<tr>
<td class="color">${sn}</td>
<td class="color">${rtc}</td>
<td class="color">${pbtc}</td>
</tr>`;  =>각 요소별로 ${}에 요소를 넣어 하나의 temp_html로 구성하여 append로 삽입.
$('#names-q1').append(temp_html);
}
else {
let temp_html = `<tr>
<td>${sn}</td>
<td>${rtc}</td>
<td>${pbtc}</td>
</tr>`;
$('#names-q1').append(temp_html);
}
}
}
})
}

-----------------------------------------------------------------------------------------------------------

<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thedogapi.com/v1/images/search",
data: {},
success: function(response){
// let a=(response)[0]['url'];
$("#img-cat").attr("src", (response)[0]['url']);

}
})

}
</script>

 

제이쿼리에서 $("#id_img").attr("src", "이미지 경로"); 사용

처음 딕셔너리에서 url이 될 곳을 주소를 추출하고 해당주소를 제이쿼리 문에서 경로 부분에 추가.

 

질문:

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

 

ajax기본골격에서   success: function(~)를 써야하는 이유와

success: function(response)를 써도 

function q1() {
            $('#names-q1').empty();
                            $.ajax({
                  type: "GET",
                  url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                  data: {},
                  success: function(response){
                     alert(['getStationList']['row'][0]['stationName']

를 하게 되면 윗줄 0이 정의되지않았다고 stationname이 출력안됨..

let rows = response["getStationList"]["row"][0]['stationName']

alert(rows) 해야 출력됨..

success: function(response)를 썼으니 아래도 response를 사용해야하는지.. 이 구문에 대해 잘모르겠음..

 

질문2:

<div class=border1>

   <span>달러환율</span>

</div>

<style>

.border1

{

width:180px;
height: 40px;
border:2px solid
text-align: center;

</style>

 

이렇게하면 div박스안에 달러환율글씨가 center를 줬는대도 불구하고 정가운데 배치안되고

left,right는 가운데 배치되는데 top과bottom은 가운데가 아니라 조금 위쪽으로 올라가게 글씨가 배치됩니다 

이경우에 padding:7px정도 주면 div박스 가운데로 글씨가 배치되는데 padding안주고 중간에 배치할순없나요?

이렇게 보통하는건가요?