CI 묻고 답하기

제목 jQuery를 이용한 Ajax구현 테스트상의 문제점
글쓴이 토마스 작성시각 2013/10/24 21:02:07
댓글 : 11 추천 : 0 스크랩 : 0 조회수 : 28562   RSS
jQuery를 이용해서 Ajax를 실행하는 테스트를 하려는데 도데체 뭐가 문제인지 모르겠습니다.
공부를 시작한지 얼마되지않아 기존에 올려져있는 글들을 보아도 잘 이해가 되지 않네요.
고수님들 아래의 코드를 확인하시고 무엇이 문제인지 알려주시면 감사하겠습니다.

Cotroller에 ajax_test.php의 코드는 다음과 같습니다.
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
class Ajax_test extends CI_Controller{
    function __construct(){
        parent::__construct();
    }
   
    /*
     * Ajax테스트
     */
    public function test(){
        $this->load->view('ajax/ajax_test_v');
    }
   
    function ajax_receive(){
        $msg = $this->input->post("msg",TRUE);
        echo $msg;
    }
}
?>


Viewer안에 ajax라는 폴더 안에 있는 ajax_test_v.php의 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </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({
                    url:'/bbs/ajax_test/ajax_receive',
                    dataType:'text',
                    type:'POST',
                    data:{
                        'msg':$('#msg').val()
                    },
                    complete:function(xhr,textStatus){
                        if(textStatus == 'success'){
                          $('#result').html(xhr.responseText);
                        }
                    }
                });
            });
        </script>
    </body>
</html>
 다음글 코드이그나이터로 구글에 검색잘되는 웹사이트 만드려면 (3)
 이전글 codelgniter 소스 분석중 질문 있습니다. (1)
목록

댓글

변종원(웅파) / 2013/10/24 21:28:37 / 추천 0
소스상으로 문제는 없는 것 같습니다.

작동이 어떻게 안되는지 올려주셔야죠. 
버튼을 눌러도 반응이 없다거나 ie에서 개발자도구f12)에서 스크립트 에러가 난다거나...

파이어폭스에 파이어버그라는 확장프로그램 설치하고 post가 제대로 넘어가는지,
데이터가 제대로 화면에 출력되는지 확인해 보세요.
토마스 / 2013/10/25 07:06:45 / 추천 0
버튼을 클릭을 해도 서버측으로 보낸 input데이터가  <div id="result"></div>안에 표시가 되지 않습니다.
말씀하신대로 개발자도구로 확인해보니 post값은 넘어가는것 같은데...
Controller의 ajax_test / ajax_receive함수로 부터 응답이 되질 않습니다.
Response를 보면 에러시 표시되는 페이지의 소스를 가져오네요.
에러내용을 보니 아래와 같습니다.
  1. POST http://localhost/bbs/ajax_test/ajax_receive 500 (Internal Server Error) jquery-latest.js:8706

  2. jQuery.extend.ajaxjquery-latest.js:8136
  3. (anonymous function)test:13
  4. jQuery.event.dispatchjquery-latest.js:5095
  5. elemData.handlejquery-latest.js:4766
한대승(불의회상) / 2013/10/25 09:58:46 / 추천 0
일단 컨트롤러쪽 코드에 에러는 없는것 같은데 에러내용은 500 이군요.
경로가 잘못 된거 같기도 하고...
아래 처럼 소스 수정 하시고 웹브라우져에서 http://localhost/bbs/ajax_test/ajax_receive/?msg=123 이런식으로 입력해 보세요.
출력에 이상이 없다면 ajax를 get 방식으로 바꿔서 테스트 해보시구요.
function ajax_receive(){
        $msg = $this->input->get("msg",TRUE);
        echo $msg;
    }
토마스 / 2013/10/25 10:40:59 / 추천 0
불의회상님 말씀하신대로 get방식으로 바꿔서 실행을 하니까 정상적으로 작동을 하네요.
하지만,post방식으로는 실행이 안되는게 좀 답답하네요
혹시 아시는분 계시면 알려주시기 바랍니다.
웅파님, 불의회상님 유용한 답변을 주셔서 너무 감사드려요.
letsgolee / 2013/10/25 17:39:41 / 추천 0
 ajax_test.php를 다음으로 하고:
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
class Ajax_test extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->helper('url');
    }
    
    /*
     * Ajax테스트
     */
    public function test(){
        $this->load->view('ajax/ajax_test_v');
    }
    
    function ajax_receive(){
        $msg = $this->input->post("msg",TRUE);
        echo $msg;
    }
}
?>
ajax_test_v.php를 다음으로 합니다:
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </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({
                    url:'<?php echo site_url("bbs/ajax_test/ajax_receive");?>',
                    dataType:'text',
                    type:'POST',
                    data:{
                        'msg':$('#msg').val()
                    }
    }).done(function(data) {
                    $('#result').html(data);
                });
            });
        </script>
    </body>
</html>
저는 테스트에서 잘 됩니다.
토마스 / 2013/10/25 19:32:56 / 추천 0
조금전에 테스트 해봤는데..역시 GET방식 설정으로는 잘 되는데 POST방식으로는 잘 안되더라구요
CI환경설정상의 차이 때문이 아닐까 싶은데요.
좀더 분석해 봐야겠습니다.
letsgolee님 테스트도 해보시구 알려주셔서 너무 감사해요.
토마스 / 2013/10/28 20:43:53 / 추천 0
결국 CodeIgniter의 버전의 차이인것 같습니다. 최신버전(v2.1.4)상의 버그인지 모르겠는데
위와 같은 예제를 v2.1.3상에서 실행해 보니까 POST도 문제없이 실행이 되었습니다.
좋은 답변들 감사드립니다.
letsgolee / 2013/10/29 08:44:23 / 추천 0
이건 Ajax 통신문제이지 codeigniter문제가 아닙니다. 저도 최신버젼에서 테스트 한거고 또한 지금 사무실 사용하는 프로그램을 짜고 있는데 거의 모든 것이 ajax로 작동됩니다. 소스를 잘 확인해보세요.
토마스 / 2013/10/29 09:12:32 / 추천 0
그런가요?. 알겠습니다. 다시 살펴봐야겠네요.
닉 / 2013/10/30 08:44:04 / 추천 0
포스트로 아작스 쓰려면 콘피그에 설정한 ci_세션인가 쿠키 값도 같이 넘겨야 오류없이 넘어가요
토마스 / 2013/10/30 10:50:48 / 추천 0
아 그런가요? 그렇게 테스트 해 보겠습니다. 감사합니다.