Ajax :: _ $.ajax( ) 메서드

 

  $.ajax( )  

:데이터를 서버에 HTTP PSt, GET방식으로 전송할 수 있으며,

HTML, XML, JSOn, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드.

$.post( ), $.get( ), $.getJSON( ) 메서드의 기능을 하나로 합쳐 놓은 것.

 

 

  $.ajax({                                                                                     

     url: 'url 주소'.                                                                          

     type: '전송 방식(get, post)',                                                            

     data: '전송할 데이터',                                                                  

     dataType: '요청한 데이터 형식(html, xml, json, text, jsonp)',  

     success: function( ) { 콜백함수 }                                                           

  });                                                                                               

 

**콜백함수 : 일정 조건이 충족되면 실행되는 함수

 

 

 

 

  Ajax로 JSON 데이터 바인딩하기  

 

mockaroo.com 에서 가상의 데이터베이스 생성 가능.

json file.

$.ajax({

  url : json파일의 위치,

  dateType : 'json',

  success: function(data){

     ajax요청이 성공적으로 이루어지면 실행될 함수

     if(data.length > 0){  

     data의 길이가 0이상이면 실행 (data가 있을 경우 실행)

                    var tb = $('<table/>');

                    for(var i in data){

                     강화된 for문. 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),

                            $('<td/>').text($last_name),

                            $('<td/>').text($email),

                            $('<td/>').text($gender)

                        );

 

                        tb.append(row);

                    }

                    $('.wrap').append(tb);

                     테이블을 만들어서 .wrap에 추가.

  }

});

결과