Drupal 8에서 Ajax 형태 사용

키 테이크 아웃

Drupal 8 Ajax API는 JavaScript 코드없이 클리너의 사용자 친화적 인 양식을 허용합니다. 이것은 형태의 동작 중 일부를 ajaxify함으로써 달성 될 수 있습니다.

전자 메일 유효성 검사 로직을 Ajax 콜백으로 옮길 수 있으며, 이는 양식 제출없이 유효성 검사를 유발하고 메시지를 인쇄합니다. 이것은 형태의 일반적인 행동이며 Drupal 8에서 Ajax를 이해하기위한 좋은 운동 역할을합니다. ajax api는 양식 동작을 사용자 정의 할 수 있습니다. 양식 클래스의 Ajax 콜백 메소드는 폼 배열 및 양식 상태 객체를 수신하여 유효성 검사를 수행하고 유효성 검사 결과에 따라 여러 명령으로 Ajax 응답을 반환합니다. ajax는 링크에 ajax 클래스를 추가하는 것과 같은 양식 외부의 Drupal 8에서도 사용할 수 있습니다. 이를 통해 Drupal은 링크를 클릭 할 때 HREF 속성에서 URL에 AJAX 요청을 만들 수 있습니다. AJAX 명령을 반환하고 필요에 따라 다양한 작업을 수행합니다.

이 기사에서는 JavaScript 코드 한 줄을 쓰지 않고 Drupal 8 Ajax API를 사용하는 깨끗한 방법을 보여 드리겠습니다. 이를 위해, 우리는 이전 기사에서 Drupal 8을 위해 구축 한 첫 번째 사용자 정의 양식으로 돌아가서 ajaxify 그 행동을보다 사용자 친화적으로 만들 것입니다.

• 이 양식의 업데이트 된 버전은이 저장소에서 Demoform (데모 모듈)이라는 이름으로 찾을 수 있습니다. 이 기사에서 우리가 쓴 코드는 Ajax라는 별도의 지점에서도 찾을 수 있습니다. REPO를 복제하고 따라하려면 개발 환경에 모듈을 설치하는 것이 좋습니다.
demoform 명명이 잘못되었지만 Demoform은 Drupal 8에서 사용자 정의 양식 작성의 기본 사항을 설명하는 데 매우 도움이되었습니다. 검증, 구성을 처리하며 일반적으로 양식 API의 사용을 예시합니다. 물론, 그것은 기본에 초점을 맞추고 장관이 없습니다.
• 코드를 기억하거나 확인하는 경우 양식이 구성으로 저장할 이메일 주소를 수집 할 책임이있는 단일 텍스트 필드를 제공한다는 것을 알 수 있습니다. 양식 검증은 제출 된 이메일에 .com 결말이 있는지 확인합니다 (이에 대한 시도가 좋지 않지만 양식 검증 원칙을 설명하기에 충분 함). 따라서 사용자가 양식을 제출하면 구성에 새 이메일 주소를 저장하고 화면에 확인 메시지를 인쇄합니다.
이 기사에서는 이메일 유효성 검사 로직을 AJAX 콜백으로 이동하여 사용자가 이메일 주소를 입력 한 후에 검증이 자동으로 트리거되고 양식을 제출하지 않고 메시지가 인쇄되도록합니다. 다시 말하지만,이 동작에 대해 장관이 없으며 야생의 형태로 자주 볼 수 있습니다 (일반적으로 사용자 이름을 검증하기 위해). 그러나 Drupal 8에서 Ajax를 보는 것은 좋은 운동입니다.
• .
  ajax 양식 가장 먼저해야 할 일은 이메일 유효성 검사 로직을 일반 ValidateForm () 에서이 측면 만 처리하는 메소드로 이동하는 것입니다.

  알 수 있듯이 이메일 주소가 .com으로 끝나도록 논리를 조금 변경했습니다. 그러면 기존 동작이 여전히 작동하는지 확인하기 위해 주요 검증 방법 에서이 논리를 연기 할 수 있습니다.

  이 방법으로 우리의 양식이 어떻게 든 (프로그래밍 또는 다른) 제출 되더라도 검증은 여전히 ​​실행됩니다.

  다음으로, 우리는 양식 정의, 특히 이메일 필드로 전환하고 사용자 상호 작용을 기반으로 AJAX 요청을 트리거하도록해야합니다. 이것은 사용자가 필드의 가치를 바꾸고 초점을 제거하는 행위가 될 것입니다.

  우리가 여기서 새로운 일은 관련 키를 사용하여 #Ajax 키를 배열에 추가하는 것입니다. 또한 전자 메일의 유효성에 관한 짧은 메시지를위한 래퍼로 양식 요소 뒤에 약간의 마크 업을 추가했습니다.

  <span>/**
  </span><span> * Validates that the email field is correct.
  </span><span> */
  </span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
  </span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
  </span>    <span>return FALSE;
  </span>  <span>}
  </span>  <span>return TRUE;
  </span><span>}</span>

  이 모든 것에 대해 자세히 알아 보려면 Ajax API 페이지 또는 AJAX의 양식 API 항목을 참조하는 것이 좋습니다. 양식 요소의 Ajax 동작을 추가로 사용자 정의하는 데 사용할 수있는 몇 가지 다른 옵션이 있습니다. 이제 양식 클래스 내에 콜백 메소드를 작성해야합니다. 이것은 $ form array와 $ form_state 객체를 Ajax 요청을 트리거 한 양식에서 오는 인수로 수신합니다.

  간단히 말하면,이 방법에서는 검증을 수행하고 유효성 검사 결과에 따라 다른 여러 명령으로 Ajax 응답을 반환합니다. CSSCOMMAND를 사용하면 일부 CSS를 이메일 양식 요소에 직접 적용하고 HTMLCommand를 사용하면 지정된 선택기의 내용을 교체합니다 (양식 요소의 접미사를 기억하십니까?).

  이 명령은 jQuery 함수에 거의 맵핑되므로 파악하기가 매우 쉽습니다. 이 페이지에서 사용 가능한 모든 명령 목록을 찾을 수 있습니다. 그리고 우리는이 방법 내에서 3 개의 새로운 클래스를 사용하고 있기 때문에

  를 상단에서 사용하는 것을 기억해야합니다.

  <span>/**
  </span><span> * Validates that the email field is correct.
  </span><span> */
  </span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
  </span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
  </span>    <span>return FALSE;
  </span>  <span>}
  </span>  <span>return TRUE;
  </span><span>}</span>

  그리고 그것은 거의 그것입니다. 캐시를 지우고 양식을 다시로드하면 이메일 필드에 입력하고 초점을 제거하면 콜백이 트리거되어 이메일 주소를 확인합니다. 당신은 거기에 작은 Throbber 아이콘 (정의에서 변경 될 수 있음)과 우리가 정의한 짧은 메시지를 알 수 있습니다. a

  정확한 전자 메일 주소는 녹색으로 필드를 강조 표시하고 확인 메시지를 인쇄해야합니다. 반대로 레드 색상은 반대 메시지와 함께 사용됩니다. 폼 요소 정의에 래퍼를 지정한 경우 해당 선택기 내부에 배치 된 컨텐츠 (또는 렌더 배열)를 반환 할 수있었습니다. 따라서 컨텐츠 반환 또는 Ajax 명령 중에서 선택할 수있는 옵션이 있지만 대부분의 경우 후자를 추천합니다. 결론 이 기사에서는 Ajax를 사용하여 양식을 개선하고 최종 사용자에게 더 친숙하게 만드는 예를 보았습니다. 그리고 우리는 이것을 달성하기 위해 정확히 0 줄의 JavaScript를 작성했습니다.

  우리의 경우, 그것은 실제로 선호도의 문제 또는 fancification 입니다. 그러나 이와 유사한 여러 필드에 대한 검증이있는 20 개의 필드 양식을 다루고 있다면 Ajax를 사용하는 것이 실제로 의미가 있습니다. 입력이 유효하지 않다는 사실을 알기 위해 양식을 제출 해야하는 경우 사용자를 괴롭히지 않습니다.

  형태는 Drupal 8에서 Ajax를 볼 수있는 주요 영역이지만 JavaScript를 작성하지 않고 활용할 수있는 몇 가지 다른 방법이 있습니다.

  일단 좋은 방법은 모든 링크에 사용-ajax 클래스를 추가하는 것입니다. 링크를 클릭 할 때마다 Drupal이 HREF 속성의 URL에 AJAX 요청을 할 수 있습니다. 콜백에서 Ajax 명령을 반환하고 필요에 따라 다양한 작업을 수행 할 수 있습니다. 그러나 익명의 사용자를 위해 jQuery 및 기타 핵심 스크립트가 모든 페이지에로드되지는 않습니다 (따라서 AJAX는 일반 링크 동작으로 우아하게 저하 될 것입니다). 따라서이 동작이 필요한 경우 익명 사용자를 위해이 스크립트를 포함시켜야합니다.

  Drupal 8 Forms에서 Ajax를 사용하는 것에 대한 자주 질문

  Drupal 8 Forms에서 Ajax를 구현하려면 어떻게해야합니까?

  Drupal 8 형식에서 Ajax 구현에는 몇 단계가 포함됩니다. 먼저 Ajax 콜백이 포함 된 양식을 정의해야합니다. 이것은 양식의 buildform 메소드에서 수행 할 수 있습니다. '#Ajax'속성은 AJAX 요청을 트리거하는 양식 요소에 추가해야합니다. 이 속성은 '콜백'키를 포함하는 배열로, 양식 요소가 트리거 될 때 호출 할 메소드를 지정합니다. 콜백 메소드는 페이지에서 업데이트해야 할 내용을 정의하는 Ajax 응답 객체를 반환해야합니다. Drupal 8의 ajax 콜백 명령 란 무엇입니까?

  Drupal 8의 Ajax 콜백 명령은 AJAX 요청이 처리 될 때 클라이언트 측에서 수행 할 조치를 지정하는 데 사용됩니다. 이 명령은 CommandInterface를 구현하는 PHP 클래스입니다. Drupal 8에는 'Alert', 'Insert', 'Remove'및 'Replace'와 같은 몇 가지 내장 Ajax 명령이 포함되어 있습니다. CommandInterface를 구현하는 새 클래스를 만들어 사용자 정의 Ajax 명령을 만들 수 있습니다.

  Drupal 8에서 사용자 정의 ajax 명령을 만드는 방법? , CommandInterface를 구현하는 새로운 클래스를 만들어야합니다. 이 클래스는 다음 키가있는 배열을 반환하는 렌더 메소드를 정의해야합니다. '명령'은 명령의 이름 인 '명령'과 클라이언트 측에서 호출되는 '메소드'입니다. 배열에는 클라이언트 측 메소드로 전달되는 추가 데이터도 포함될 수 있습니다.

  Drupal 8에서 Ajax 오류를 처리하려면 어떻게해야합니까?

  Drupal 8에서 Ajax 오류 처리를 수행 할 수 있습니다. 양식 요소의 '#Ajax'속성에서 '오류'키 사용. 이 키는 AJAX 요청 중에 오류가 발생하면 호출되는 콜백 메소드를 지정합니다. 콜백 메소드는 오류를 처리하는 방법을 정의하는 Ajax 응답 객체를 반환해야합니다.

  ajax를 사용하여 Drupal 8의 페이지에서 여러 요소를 업데이트하려면 Ajax를 사용하여 업데이트를 사용하려면 어떻게해야합니까? Drupal 8의 한 페이지의 여러 요소는 Ajax 응답 객체에서 여러 명령을 반환 할 수 있습니다. 각 명령은 업데이트 할 요소와 수행 할 조치를 지정해야합니다. 명령은 응답 오브젝트에 추가되는 순서대로 실행됩니다.

  ajax를 사용하여 Drupal 8의 페이지의 요소를 교체하는 방법은 무엇입니까? Drupal 8의 페이지에 요소는 'replace'명령을 사용할 수 있습니다. 이 명령에는 두 가지 인수가 필요합니다 : 요소의 선택기 대체 할 새로운 컨텐츠. 선택기는 유효한 jQuery 선택기 일 수 있습니다.

  ajax를 사용하여 Drupal 8의 페이지에서 요소를 제거하려면 어떻게해야합니까?

  Ajax를 사용하여 Drupal 8의 페이지에서 요소를 제거합니다. '제거'명령을 사용할 수 있습니다. 이 명령에는 하나의 인수가 필요합니다 : 제거 할 요소의 선택기. 선택기는 유효한 jQuery 선택기 일 수 있습니다.

  ajax를 사용하여 Drupal 8의 페이지에 컨텐츠를 삽입하려면 Ajax를 사용하여 Drupal 8의 페이지에 컨텐츠를 삽입하십시오. '삽입'명령을 사용할 수 있습니다. 이 명령에는 두 가지 인수가 필요합니다. 컨텐츠가 삽입 될 요소의 선택자와 새 컨텐츠가 필요합니다. 컨텐츠는 선택한 요소 전, 후 또는 내부에 삽입 할 수 있습니다. ajax를 사용하여 Drupal 8에 경고 메시지를 표시하는 방법?

  Ajax를 사용하여 Drupal 8에 경고 메시지를 표시하려면 'Alert'명령을 사용할 수 있습니다. 이 명령에는 하나의 인수가 필요합니다 : 표시 될 메시지가 표시됩니다. 메시지는 유효한 문자열이 될 수 있습니다.

  ajax를 사용하여 Drupal 8의 다른 페이지로 리디렉션하는 방법?

  ajax를 사용하여 Drupal 8의 다른 페이지로 리디렉션하면 가능합니다. '리디렉션'명령을 사용하십시오. 이 명령에는 하나의 인수가 필요합니다. 페이지의 URL은 리디렉션됩니다. URL은 유효한 URL 일 수 있습니다

위 내용은 Drupal 8에서 Ajax 형태 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!