웹개발종합 (4) -ajax(업뎃중)

< ajax로 실시간 정보 불러오기 >

• ajax 기본골격

<script>
            function 임의지정() {
                $.ajax({
                    type: "GET",
                    url: "여기에URL을입력",
                    data: {},
                    success: function (response) {
                        console.log(response)     --response에 불러온 정보를 콘솔에서 보여주는 코드
                    }
                })
            }
</script>

• ajax 예시1 : 이미지, 텍스트 정보 불러오기

<script>
            function 임의지정() {
                $.ajax({
                    type: "GET",
                    url: "여기에URL을입력",
                    data: {},
	                success: function (response) {
                    	let url = response['url']  : url이라는 것을 위에 입력된 url페이지에서 url행에 기재되어있는 정보를 가져오는 것으로 한다.
                    	let msg = response['msg']  : msg라는 것을 위에 입력된 url페이지에서 msg행에 기재되어있는 정보를 가져오는 것으로 한다.
                                       ↓고정
                    $('#이미지').attr('src',url)   : id를 '이미지'라고 지정해놓은 입력칸에 위에서 정해놓은 url을 불러 올 것이다
                    $('#텍스트').text(msg) : id를 '텍스트'라고 정해놓은 입력칸에 위에서 정해놓은 msg를 불러 올 것이다
                }
            })
        }
</script>


 * 기본적인 텍스트(정보)만 불러오기는   ($'#임의지정').text(response['소스이름'])

• ajax 예시2 : 페이지가 열리자마자 자동으로 불러와서 바로 실행

자동 로딩 후 실행되는 기본골격

  		$(document).ready(function(){
        listing();
        });

        function listing() {
        console.log('화면 로딩 후 잘 실행되었습니다');
        }