ajax 이해하기

[ajax 이해하기]

html페이지에서 입력받은 값을 ajax 서버로 보내면 json 타입으로 결과를 받아 실시간으로 화면에 보여주는 기능에 대한 내용이다. 

동작순서

1. 사용자로부터 입력받은 값을 

2. jquery 에서 서버로 보내기 위한 작업을 진행하고

3. ajax 서버로 패킷을 전송한다.

4. 서버에서 결과값으로 보여줄 값에 대한 처리를 진행한후 

5. 데이터를 json 타입으로 변환하여 응답패킷을 보낸다

6. 응답패킷을 화면에 보여줄 포맷에 맞게 처리하여 html화면에서 보여준다. 

ajax는 ajax, post, get 함수로 보낼수 있다.

ajax.php 파일에서는 pre 태그나 echo 말고 print_r()로 결과값을 출력해본다. 

실전 사용 코드를 리뷰하여 이해하도록 한다. 여기서는 post()를 사용하였다. 

[html 코드]

<select name='select' data-object='{$tmp_key}' >

<option>...</option>

<option>...</option>

<option>...</option>

</select>

[jquery 코드]

cf) 생성된 장바구니 테이블은 장바구니 인덱스와 수량만 필요하기에 두개의 값만 넘겨주도록 한다. 

jQuery(function($){

    $("select[name= select]").change(function(){

        var qty = $(this).val();

        var key = $(this).attr('data-object');

        $.post("ajax.php", {'key' : key , 'qty' : qty}, function(data){

            location.reload();

        });

});

});

jQuery.post( url [, data ] [, success ] [, dataType ] )

url : 값을 전송할 페이 (같은 폴더 내에 있다면 파일이름만 기재해주고 외부 폴더에 있는 파일로 전송한다면 절대경로로 입력해준다)

data : 값을 넘겨줄 형태. 배열의 값을 생성하기 위해서 "키 => value" 형식으로 입력해주었다면 ajax에서는 "키 : value" 형식으로 만들어준다. 

success : callback 함수. function(data){} 모양이 콜백함수의 모양이다.  값을 넘겨주었다가 응답받아오는 형태. 필자는 페이지 새로고침의 형태로 만들기 위해 reload() 함수를 사용하였다. 

[ajax 코드]

<?php

$key = decode($_POST['key']);

$qty = $_POST['qty'];

$sql = "UPDATE cart SET

        cart_qty = '{$qty}'

        WHERE cart_idx = '{$key}'

        ";

$db->query($sql);

?>

http://roqkffhwk.tistory.com/46

->틈틈히 읽어보기

https://opentutorials.org/course/1375/6851 

-> 동영상보기!!