은은하게 코드 뿌시기

제이쿼리(jQurey) 비동기 방식 연동 - JQUERY/AJAX 본문

웹/제이쿼리 JSTL

제이쿼리(jQurey) 비동기 방식 연동 - JQUERY/AJAX

은은하게미친자 2022. 11. 14. 16:58
728x90

Ajax 란?

Asychronouse Javascript and Xml

비동기 방식으로 데이터를 전송하고 요청하는 방식

 

$.ajax() 기본형

$.ajax({
    url: "전송 페이지",  //action url
    type : "전송방식",    //get, post 방식
    data : "전송할 데이터",
    dataType : "요청한 데이터 타입", //"html","xml","json","text","jsonp"
    success : function(data){
        //전송 성공하면 실행될 코드
    },
    error : function(){
        //전송 실패하면 실행될 코드
    }        
});

+ 가상 생성 db 사이트

https://mockaroo.com/

 

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

Mock your back-end API and start coding your UI today. It's hard to put together a meaningful UI prototype without making real requests to an API. By making real requests, you'll uncover problems with application flow, timing, and API design early, improvi

mockaroo.com

//자바스크립트 보안정책 에러 : 동일 출처 보안정책

Access to XMLHttpRequest at 'file:///D:/ajax/MOCK_DATA.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

 

도메인이 존재해야하고, 같은 도메인끼리만 데이터를 주고 받을수있다

www.aaa.com  <> www.bbb.com  : 안됨

www.aaa.com/a.html  <> www.aaa.com/b.html  : 됨

 

서버와 도메인이 있어야지만 테스트를 할수있음!

서버 구축하기..

http://autoset.net/xe/

 

오토셋 소개

AutoSet 유지보수 종료 안내 1. 오토셋에 대한 유지보수 계획이 없기에 사용자분들께 이 내용을 알려드립니다. 2. 현재 사이트를 통해 제공되는 버전이 최종 버전이며, 더 이상의 업그레이드가 없

autoset.net

설치하고 나면

아래 경로에 파일이 생김 

이게 사이트의 홈 디렉토리임.

http://localhost/  

크롬에서 위에 url 입력해보면

아래와 같은 화면이 뜸

아까 만들어논 파일 복사 붙여놓기

http://localhost/ajax/ajax_test.html

 

요사이트 열면

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko">
<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>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function() {
            console.log( 'sdfsdfds');
            $.ajax({
                url:"MOCK_DATA.json",
                dataType:"json",
                success:function(data) {
                    
                    if(data.length > 0) {
                        var tb = $("<table />");
                        for(var i in data) {
                            var $id = data[i].id;
                            var $first_name = data[i].first_name;
                            var $last_name = data[i].last_name;
                            var $email = data[i].email;
                            var $gender = data[i].gender;
                            
                            
                            var row = $("<tr />").append(
                                $("<td />").text($id),
                                $("<td />").text($first_name)
                            );
 
                            tb.append(row);
                        }
                        $(".wrap").append(tb);
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div class="wrap"></div>
    
</body>
</html>
 cs

 

 

 

 

728x90

'웹 > 제이쿼리 JSTL' 카테고리의 다른 글

제이쿼리 -요소 찾기/ 봐도봐도 까먹는 선택자 (next,prev,parent,children,siblings,>,+)  (0) 2023.01.05
[자바스크립트/ 제이쿼리] $변수 그냥변수와의 차이  (0) 2022.11.28
제이쿼리(jQurey) - 효과 및 애니메이션 메소드  (0) 2022.11.14
제이쿼리(jQurey) -이벤트  (0) 2022.11.10
제이쿼리(jQurey) -기본  (0) 2022.11.10
'웹/제이쿼리 JSTL' Related Articles more
Comments