Ajax를 알기 쉽게 해설! (실장편)

지난번에는 Ajax의 용어 해설과 구현에 대한 준비를 설명했습니다!

Ajax 구현에 있어서 아래의 3개의 섹션으로 나누었으므로, 조금씩 이해해 주시면 다행입니다!
➀ Ajax로 요청 보내기!
➁ 컨트롤러와 jbuilder를 준비!
➂ 응답을 처리하여 화면에 표시!

그럼 마침내 Ajax 구현으로 들어갑시다! ! !

➀ Ajax로 요청 보내기!

완성된 코드에서 설명하겠습니다!

posts.js

$(function() {
  $("#new_post").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentData: false
    })
  })
});

◯위에서 순서를 따라 설명하겠습니다!
· $("#new_post").on('submit', function(e) {
양식이 제출되었을 때 이벤트가 발화하도록 설정하고 있습니다!
여기서의 주의점은 이벤트의 발화원은 송신 버튼이 아니고, 폼 전체의 정보를 보내
하고 싶으니까 폼 태그의 ID를 지정한다!

· e.preventDefault
이것은 폼이 송신되었을 때, 디폴트라고 폼을 송신하기 위한 통신이 되어 버리기 때문에, 디폴트의 이벤트를 정지해 주는 역할이 있다!

· var formData = new FormData(this);
폼의 값을 상수에 대입하고 있다!
(this)의 내용은 ("#new_post")입니다!

· var url = $(this).attr('action');
데이터를 전송하는 URL을 상수로 할당!
attr은 ("#new_post")에서 ( 'action') 속성을 검색합니다! 라는 의미입니다!

· ajax의 설명
url: 정보를 보내고 싶은 URL처!
type: Rails의 HTTP 메소드에 해당하는 것!
data: 보내는 정보!
dataType: 유형!
processData : FormData 객체로 데이터를 검색하는 경우에 설명한다고 기억하면 OK!
contentData : FormData 객체로 데이터를 검색하는 경우에 설명한다고 기억하면 OK!

➁ 컨트롤러와 jbuilder를 준비!

이번에는 3개의 파일을 편성해 나가기 때문에, 우선은 전 섹션에서 기술을 한 posts.js로부터 봅시다!

posts.js

$(function() {
  $("#new_post").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentData: false
    })
    .done(function(post){

    })
    .fail(function(post){

    })
  })
});

◯위에서 순서를 따라 설명하겠습니다!
·.done(function(post){
ajax가 성공했을 때 수행되는 처리를 여기에 설명합니다!

·.fail(function(post){
ajax가 실패했을 때 행해지는 처리를 여기안에 기술합니다!

계속해서, 컨트롤러의 기술을 확인해 갑니다!

posts_controller.rb

class PostsController < ApplicationController
  def index
    @post = Post.new
    @posts = Post.all
  end

  def create
    @post = Post.create(post_params)
  end

  private
    def post_params
      params.require(:post).permit(:text)
    end
end

여기의 설명은 특히 어렵지 않습니다!
그러나 create 액션에 대한 템플릿 엔진을 준비해야합니다 ...
그것이 jbuider입니다!

create.json.jbuider 파일을 views/posts/direct 아래에 작성합시다! ! !

create.json.jbuider

json.text @post.text

· json으로 읽다
@post.text를 json.text로 읽고 있습니다! (오른쪽에서 왼쪽)

➂ 응답을 처리하여 화면에 표시!

완성된 코드에서 설명하겠습니다!

posts.js

$(function() {
  function buildPost(post){
    var html = `<div class="content">
                  ${post.text}
                </div>`
    return html;
  }

  $("#new_post").on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentData: false
    })
    .done(function(post){
      var html = buildPost(post);
      $('.contents').append(html);
      $('post_text').val('');
      $('.form__submit').prop('disabled',false);
    })
    .fail(function(post){
      alert('エラー');
    })
  })
});

◯순을 따라 설명하겠습니다!
・function buildPost(post)
실제로 삽입하는 HTML 정보를 정의합니다!
return으로 결과를 돌려준다!

· $('.contents').append(html);
삽입할 HTML의 부모 요소를 지정합니다!
content가 아니라는 점에 주의!

· $('post_text').val('');
양식이 제출되면 양식 내용을 재설정하십시오!

· $('.form__submit').prop('disabled',false);
Ajax의 기본값이라면 한 번 보내기 버튼을 누르면 두 번째가 작동하지 않습니다 ...
그것을 해제하고 있습니다!

이상으로 Ajax의 구현이 완료입니다! ! !

처음에는 구조를 이해하는 것이 매우 어려웠습니다.

중요한 것은 대략적인 흐름을 잡고, 작업하면서 디버그를 하고 확인해 나가는 것이라고 생각합니다!

조금씩 익숙해 갑시다!

그럼 조용히 감사합니다!

* 아직도 잡기 때문에 의견 등 있으시면 부담없이 코멘트 부탁드립니다!