검색결과 리스트
Ajax에 해당되는 글 2건
- 2012.04.30 jQuery ajax와 콜백 callbacks 활용하기
- 2012.03.15 jquery json IE, Opera 등 parse error 발생 할때
글
jQuery ajax와 콜백 callbacks 활용하기
js API/jquery
2012. 4. 30. 13:33
jQuery ajax와 $.Callback() 함수를 활용하기
$('#list').fusionAjaxRecord 를 통해 ajax 통신을 마친 후
외부 함수인 prints 로 데이타를 전송한다.
외부 함수 prints 의 obj 는 #list 를 리턴받은 값이고
외부 함수prints 의 data는 ajax를 통해 돌려받은 데이타값을 리턴받는 값이다
# @ 외부 함수인 prints 함수를 ajax 통신이 마친 후 호출 및 데이타 전송
< script type="text/javascript"> $(document).ready(function() { // obj : html 아이디 및 클래스 elementTag function prints(obj,data){ $.each(data, function(key,state) { // 값 처리 }); } $('#list').fusionAjaxRecord({ 'filename':'./modules/test_view.php', 'data':{ 'tname':'bbs_notice', 'current_record':'1' } }, prints); }); < /script>
@# 전체소스 /==========================================================
< script> jQuery(function($) { /** @prints : 외부 함수 function prints(){} function prints(obj, data){ } $('#list').fusionAjaxRecord({ 'filename':'./modules/bbs_view.php', 'data':{ page:1, uid:10 } }, prints); */ $.fn.fusionAjaxRecord= function(params,callMethod) { var targetID = $(this); var callbacks = $.Callbacks(); var callFunction =callMethod; var param = $.extend({ filename : null, data : '' },params||{}); $.ajax({ type: "post", url: param.filename, cache: false, dataType :'text', data :param.data, success: function(data, status) { var json = eval("(" + data + ")"); if(typeof(json.result) != 'undefined') { if(json.result == 'false') alert(json.msg); else{ callbacks.add(callFunction); callbacks.fire(targetID,json); } } }, error: function(data, status, errorThrown){ alert(data.responseText+' '+status+' '+errorThrown); } }); } }); < /script>
'js API > jquery' 카테고리의 다른 글
id 값이 존재 하는지 체크 하기 (0) | 2012.06.18 |
---|---|
jquery checkbox 체크박스 및 라디오버튼 간단히 체크 상태인지 확인 (0) | 2012.05.04 |
jQuery select 셀렉트 메뉴 onchange 이벤트 (0) | 2012.04.29 |
jQuery 특정 자바스크립트 로딩 후 실행 하기(동적 스크립트 로딩 및 액션) (0) | 2012.04.27 |
jQuery 마우스 롤오버 이미지 기능과 메뉴 활성화 및 필요없는 메뉴 지우기 (1) | 2012.04.26 |
설정
트랙백
댓글
글
jquery json IE, Opera 등 parse error 발생 할때
js API/jquery
2012. 3. 15. 11:02
우리는 jquery 를 이용해서 서버와의 통신을 자주 하게 됩니다.
그런데 dataType : 'json' 으로 ajax 통신을 할때
크롬을 제외한 IE 등에서 parse error 를 발생합니다.
정말 난감할 뿐만 아니라 어처구니가 없는거죠
jquery 가 잘 만들어 졌지만 브라우저 마다 처리 방법들이 조금씩 다르다 보니
모두 호환 되도록 하는 방법 밖에 없는 것 같습니다.
그리하여 해결 방법은 이렇습니다.
@ Javascript /=====================================
@ PHP /============================================
@ HTML /===========================================
1. jquery를 이용한 ajax 통신을 할때 dataType 를 text 로 합니다.
2. text 값으로 받은 값을 eval 를 통해 json 데이타로 변환 한다.
그런데 dataType : 'json' 으로 ajax 통신을 할때
크롬을 제외한 IE 등에서 parse error 를 발생합니다.
정말 난감할 뿐만 아니라 어처구니가 없는거죠
jquery 가 잘 만들어 졌지만 브라우저 마다 처리 방법들이 조금씩 다르다 보니
모두 호환 되도록 하는 방법 밖에 없는 것 같습니다.
그리하여 해결 방법은 이렇습니다.
@ Javascript /=====================================
< script > function jsonAjax(uid) { $.ajax({ type: "post", url: "./test_json.php", cache: false, dataType :'text', data: {'uid':uid}, success: function(data, status){ var json = eval("(" + data + ")"); // OR var json =$.parseJSON(data); if(typeof(json.result) != 'undefined') { if(json.result != ''){ alert(json.result); }else{ $("#list_loop").empty(); //초기화 $.each(json.msg, function(key,state) { $("#list_loop").append(''+state["userid"]+' ('+state["name"]+')'); }); } } }, error: onError }); return false; } function onError(data, status, errorThrown){ alert(data.responseText+' '+status+' '+errorThrown); } < /script >
@ PHP /============================================
<?php # 회원정보 루프 배열 값 $loop[0] = array( 'userid' => 'test1id', 'name' => '홍길동' ); $loop[1] = array( 'userid' => 'test1id', 'name' => '홍길동' ); # json 최종결과 $args = array( 'result' => 'ok', 'msg' => $loop ); echo json_endcode($args); exit; ?>
@ HTML /===========================================
< div id="list_loop"> 여기에 내용 결과 출력 < /div >
1. jquery를 이용한 ajax 통신을 할때 dataType 를 text 로 합니다.
2. text 값으로 받은 값을 eval 를 통해 json 데이타로 변환 한다.
'js API > jquery' 카테고리의 다른 글
jQuery 레이어 창 만들기 (0) | 2012.04.20 |
---|---|
jquery 정규식 표현 문자 검색 등 (0) | 2012.04.19 |
체크박스 checkbox 체크 된 목록 값만 가져오기 (2) | 2012.04.18 |
jquery 활용 js 파일 include 하기 (1) | 2012.04.03 |
jquery를 활용한 select 메뉴 컨트롤 메니저 (0) | 2012.03.29 |