비동기 통신에서 Todo가 저장한 응용 프로그램의 JS를 상세하게 분석한다.

2759 단어 JavaScript
다음과 같이 적용됩니다.
js 파일, 컨트롤러, 보기는 다음과 같습니다. todo.js $(function() { function buildHTML(todo) { var html = $('<li class="todo">').append(todo.content); return html; } $('.js-form').on('submit', function(e) { e.preventDefault(); var todo = $('.js-form__text-field').val(); $.ajax({ type: 'POST', url: '/todos.json', data: { todo: { content: todo } }, dataType: 'json' }) .done(function(data) { var html = buildHTML(data); $('.todos').append(html); $('.js-form__text-field').val(''); }) .fail(function() { alert('error'); }); }); }); index.html <div class="contents"> <%= form_for @todo, html: { class: 'form js-form' } do |f|%> <%= f.text_field :content, class: 'form__text-field js-form__text-field' %> <%= f.submit class: 'form__submit js-submit' %> <% end %> <ul class="todos"> <%= render @todos %> </ul> </div> todo_controller.rb class TodosController < ApplicationController def index @todo = Todo.new @todos = Todo.order('created_at ASC') end def create @todo = Todo.create(todo_params) respond_to do |format| # respond_to 메서드에서 HTML 응답 요청 # 역시 JSON의 응답을 요구하며 조건을 달리한다. format.요청 상황 format.요청한 경우 end end private def todo_params params.require(:todo).permit(:content) end end ・Json 루비의 해시와 마찬가지로 키와 가치의 조합을 통해 데이터를 표현하는 데이터 기술 형식이다. 표시 형식은 다음 표 참조 {user name: "test님",created at: 2019-08-28T10: 35: 13.000+09", 콘텐츠:"이것은 JSON의 모양입니다!"image_url: null, id: 6} 다음은 js 파일을 자세히 보겠습니다. todo.js $(function) {/function에서 다음과 같은 함수를 정의합니다 function buildHTML(todo) { var html = $('<li class="todo">').append(todo.content); //토도의 내용을 콘텐츠에 추가합니다. return html; //controller가 설정한 처리 실행 (format.] {redirect to:root} } $('.js-form').on ('submit ',function (e) {// 이벤트 설정 (submit 이벤트 (클릭 또는 리턴 키) 이 진행될 때 처리). e.preventDefault(); //기본적으로 통신 처리를 통해 홈 페이지를 보내는 처리를 중지합니다 var todo = $('.js-form__text-field').val(); 비동기 통신을 위한 기술. type:'POST', /HTTP 통신의 종류를 기술했습니다.GET와 POST 두 가지가 있습니다. url: '/todos.이해하기 편리하도록 매개 변수의 부분을 일렬로 만들었다 //url: 요청을 보낸 목적지를 설명하는 URL입니다. // 데이터: 서버에 보내는 값을 설명합니다. // 데이터 형식: 서버에서 되돌아오는 데이터 형식을 지정합니다. .done {비동기 통신 성공 시 처리 var html = buildHTML(data); // HTML 응답 정보,build HTML 처리 $('.todos').append(html); // 작성한 내용을 HTML에 추가합니다. $('.js-form__text-field').val(''); // 미작성 시 추가되지 않는 유효성 설정 }) .fail(function() {// 비동기 통신 실패 시 처리 alert('error'); //error라는 경보문을 표시합니다. }); }); }); 현상에 대한 이해가 바로 이런 인상이다. 잘못이 있으면 말씀해 주세요.
[PlayCanvas] 가로 조정 시 구성된 모델 등 숨겨진 것
[Rubby] 문자열을 일반적인 구분자로 구분하려면 다음과 같이 하십시오.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage