$.ajax(settings)
- jQuery를 이용한 ajax통신의 가장 기본적인 API
- 주요속성
- data : 서버에 전송할 데이터, key/value 형식의 객체
- dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)
- type : 서버로 전송하는 데이터의 타입 (POST, GET)
- url : 데이터를 전송할 URL
- success : ajax통신에 성공했을 때 호출될 이벤트 핸들러
예제1-1. 웹페이지
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 | <!DOCTYPE html><html> <head> </head> <body> <div id="result"></div> <input type="text" id="msg" /> <input type="button" value="get result" id="getResult" /> <script> $('#getResult').click( function() { $('#result').html(''); $.ajax({ dataType:'json', type:'POST', data:{'msg':$('#msg').val()}, success:function(result){ if(result['result']==true){ $('#result').html(result['msg']); } } }); }) </script> </body></html> |
예제 1-2. 서버 쪽 로직
1 2 3 | <?echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));?> |
본 자료는 https://opentutorials.org/course/53/49 에서 퍼온 자료입니다.
'개발 > PHP' 카테고리의 다른 글
| [bpopup] 레이어팝업창 소스 (0) | 2017.08.28 |
|---|---|
| [selectbox] 대분류 중분류 필터 // 선택적 초이스 할때 (0) | 2017.08.24 |
| [html/php] 한페이지내 텝메뉴를 통한 구현 (0) | 2017.05.01 |
| 버튼을 통한 아래 메뉴 혹은 탭 페이지 구현 (0) | 2017.05.01 |
| input 동적 추가/삭제 하기 (0) | 2016.11.08 |