Cakephp3 에서 Ajax 사용하기

- 2월 21, 2018

그냥 쓰는 것과 비슷한데..전송 시 메소드를 지정해주는 것과 전송된 데이터를 어찌 받아서 사용하느냐 정도만 신경쓰면 될 듯 하다.우선 컨트롤러 쪽에서는 메소드 하나 만들어서 페이지 렌더링을 꺼 주고, is(’ajax’）로 넘어온 값을 확인 한 후에 사용하면 된다.

// XXXXController.php
  public function ajaxTest()
  {
    $this->autoRender = false;

    if ($this->request->is("ajax")) {
      $username = $this->request->data['username'];
      $password = $this->request->data['password'];
    }

    if(isset($username) && isset($password))
    {
      echo 'OK'."\n";
      echo 'username;'.$username."\n";
      echo 'password;'.$password;
    }
    else
    {
        echo 'NO';
    }
}

뷰(.ctp) 쪽은 심플하게..음..아직도 cake의 helper를 능숙하게 못 쓰는 관계로 순수 html과 helper 코드가 섞여있지만 뭐...그러려니...(멍...)

<div class="row">
  <div class="col-sm-12">
    <div class="index columns content">
        <?= $this->Form->create('Outputs',['id' => 'form_1']) ?>
          <?= $this->Form->input('username',['label' => 'Username', 'type' => 'text']) ?>
          <?= $this->Form->input('password',['label' => 'Password', 'type' => 'password']) ?>
          <?= $this->Form->input('submit',['label' => 'Submit','type' => 'submit']) ?>
        <?= $this->Form->end() ?>
        <p>
        <?= $this->Form->input('ajax',['label' => 'Ajax', 'type' => 'button']) ?>
        <div class="result">
        </div>
    </div>
  </div>
</div>

스크립트는 일부러 두 개 만들어봤다..전송 버튼과 AJAX 버튼..처리하는 내용은 똑같음..url에 주소를 적은 후 뒤에 컨트롤러에 정의한 메소드명을 적어줘야 하는 것이 포인트. 여기서는 OutputsController.php 에 ajaxTest() 를 정의했다고 가정했다.

<script type="text/javascript">
$(function()
{
  // Submit button
  $('#form_1').on('submit', function(e){
    e.preventDefault();
    $.ajax({
      url:'../outputs/ajaxTest',
      type:'POST',
      data:{
        'username':$('#username').val(),
        'password':$('#password').val()
      }
    })
    .done(function(data){
      $('.result').html(data);
      console.log(data);
    })
    .fail(function(data){
      $('.result').html(data);
      console.log(data);
    });
  });  

  // Ajax button
  $('#ajax').on('click',function(){
    $.ajax({
      url:'../outputs/ajaxTest',
      type:'POST',
      data:{
        'username':$('#username').val(),
        'password':$('#password').val()
      }
    })
    .done(function(data){
      $('.result').html(data);
      console.log(data);
    })
    .fail(function(data){
      $('.result').html(data);
      console.log(data);
    });

  });
});
</script>

음...자바스크립트나 제이쿼리는 디버깅 하기가 좀...ㅠㅠ 게다가 구조가 복잡해져서 함수 안에 함수가 있고 그 안에 또 객체나 배열을 적기도 하니까..괄호, 콤마, 세미콜론 등이 막 복잡하게 얽혀보이고 하나 빼먹거나 하나 더 있거나 하면 바로 에러가 나니..OTL익숙해지면 좀 나아지려나...흠...ㅠㅠ

이 블로그 검색

Woosokism BLOG

2021년 목표설정

Cakephp3 에서 Ajax 사용하기

댓글

댓글 쓰기

이 블로그의 인기 게시물

[메모] PostgreSQL에서 Insert 하는 경우 자동채번 PK가 중복에러 나는 경우

[C# & LINQ] 랜덤으로 데이터를 한 개 추출하는 방법

[react-native] uuid 생성이 에러가 날 때 대처법