Làm cách nào tôi có thể triển khai biểu mẫu AJAX?

Nhiệm vụ của tôi là gửi biểu mẫu liên hệ qua AJAX và sau đó hiển thị "Cảm ơn bạn đã gửi!" tin nhắn, được tải ở nơi có hình thức. Vì vậy, tôi cần phải ajaxify hình thức liên lạc hiện có.

Tôi đã tìm thấy một số ví dụ về cách xác thực các trường biểu mẫu bằng AJAX trong D8, nhưng tôi không thể tìm thấy bất kỳ ví dụ nào về cách thực hiện gửi biểu mẫu ajax và tải một số nội dung qua AJAX sau đó.

Làm thế nào tôi có thể thực hiện nhiệm vụ của mình? Làm thế nào tôi nên thay đổi hình thức liên lạc để thêm chức năng cần thiết?

Khi làm việc với ajax trong các hình thức bạn phải ghi nhớ những điều sau:

• biết nếu bạn đang xây dựng lại toàn bộ biểu mẫu hoặc chỉ một phần của biểu mẫu đó và bọc biểu mẫu tương ứng với phần tử div có thuộc tính ID mà bạn sẽ sử dụng trong định nghĩa #ajax trên phần tử kích hoạt là 'trình bao bọc'. Sử dụng các thuộc tính #prefix và #suffix cho điều này ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';). Ngoài ra, hãy nhớ rằng nếu bạn có mẫu tùy chỉnh cho biểu mẫu của mình thì KHÔNG hiển thị tiền tố và hậu tố trong trường hợp này ( {{ form|without('#prefix', '#suffix') }}) nếu không chúng sẽ được hiển thị hai lần - bởi mẫu của bạn và cả trình bao bọc chủ đề của biểu mẫu. Bạn không thể ngăn chặn điều này bằng cách đặt #theme_wrappers thành mảng trống do mẫu biểu mẫu chứa phần tử html mẫu thực tế.

• trong trình xử lý trình ajax của bạn, trả lại toàn bộ biểu mẫu hoặc một phần của biểu mẫu mà bạn đã gói và muốn xây dựng lại ( return $formhoặc return $form['myelement']). Bạn cũng có thể sử dụng các lệnh ajax thay vì chỉ trả về cấu trúc biểu mẫu nhưng đó là công cụ nâng cao hơn.

• lưu trữ mọi giá trị trong bộ nhớ của trạng thái biểu mẫu cho đến khi bạn gửi biểu mẫu. Làm điều này trong trình xử lý trình ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) và luôn gọi $form_state->setRebuild()nếu bạn không thực hiện việc gửi biểu mẫu cuối cùng. Tôi thích có trình xử lý trình tùy chỉnh nhưng có nhiều logic hơn trong trình xử lý trình chính cũng hoàn toàn ổn.

• luôn luôn sử dụng #namethuộc tính vào nút đó đang làm việc nộp và nếu bạn chỉ có hình thức đơn nộp sử dụng bộ xử lý $for_state->getTriggeringElement()['#name']để phát hiện yếu tố nào đã gửi biểu mẫu.

• nếu bạn đang sử dụng 'trigger_as' trong định nghĩa #ajax, trong trường hợp bạn muốn gửi biểu mẫu với phần tử chọn chẳng hạn, hãy luôn sử dụng định nghĩa #ajax giống như bạn làm trên nút. Theo kinh nghiệm của tôi, nó là bắt buộc - mặc dù không được nêu trong tài liệu.

• việc sử dụng #limit_validation_errorsđôi khi rất khó khăn và để tìm hiểu lý do tại sao biểu mẫu không hoạt động có thể mất khá nhiều thời gian, vì vậy hãy sử dụng nó một cách cẩn thận (điều này tốt cho việc cách ly các lỗi biểu mẫu chỉ trên (các) phần tử mà bạn thực sự xây dựng lại để mã của bạn không ảnh hưởng đến các phần khác của mẫu).

• luôn luôn sử dụng các nút để gửi biểu mẫu và nếu bạn muốn có thứ gì đó lạ mắt, như chọn là yếu tố kích hoạt, hãy sử dụng tùy chọn 'trigger_as' của cấu hình #ajax và ẩn nút thực với lớp 'js-hide' cho giao diện người dùng tốt.

• trong định nghĩa biểu mẫu, hãy lấy các giá trị mặc định từ bộ lưu trữ của trạng thái biểu mẫu nếu chúng tồn tại hoặc gán chúng vào bộ lưu trữ nếu chúng không có. Nếu không, hình thức sẽ không hoạt động đúng.

• không sử dụng $ this hoặc bất cứ thứ gì khác mà bạn không có quyền truy cập ra bên ngoài, nếu không nó sẽ phá vỡ ajax. luôn luôn sử dụng xử lý ajax tĩnh.

• cuối cùng khi gửi biểu mẫu, tùy thuộc vào thực tế là bạn (không) có trình xử lý biểu mẫu tùy chỉnh cho ajax, hãy vô hiệu hóa việc xây dựng lại biểu mẫu bằng cách gọi $form_state->setRebuild(FALSE).

• bạn có thể sử dụng các lệnh gọi shorthand trong phần tử gửi ajax ( $element['#ajax']['callback'] = '::ajaxFormRebuild';và $element['#submit'] = [['::ajaxFormSubmitHandler'];).

• gọi lại ajax hoàn toàn để trả về mẫu đã xây dựng lại hoặc các lệnh ajax. Không bao giờ trả lại biểu mẫu đã thay đổi (nghĩa là không thay đổi mảng biểu mẫu trong cuộc gọi lại này).

Để thêm vào danh sách kiểm tra này, nếu bạn đang hiển thị một biểu mẫu trong cửa sổ phương thức, có khả năng các thông báo lỗi sẽ không được hiển thị. Như Ivan Jaros đã nói, bạn phải đảm bảo rằng biểu mẫu có trình bao bọc:

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

Bạn cũng cần thêm phần sau vào phần tử đang gửi biểu mẫu. Trong hầu hết các trường hợp, đó sẽ là nút gửi của bạn:

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

Tôi sử dụng mô-đun Liên hệ ajax . Một số chi tiết về nó (từ trang dự án của nó):

Liên hệ Ajax thực hiện đệ trình ajax cho biểu mẫu Liên hệ trong Drupal 8.

Làm thế nào nó hoạt động

Sau khi kích hoạt mô-đun, mỗi biểu mẫu liên hệ sẽ hiển thị hộp kiểm "Sử dụng ajax". Khi hộp kiểm này được bật, biểu mẫu liên hệ sẽ hiển thị cho bạn tùy chọn khác "Loại xác nhận" với các tùy chọn sau:

• Tải biểu mẫu: sẽ gửi biểu mẫu mà không cần tải lại trang.
• Tải từ tin nhắn tùy chỉnh: tải một văn bản tùy chỉnh.
• Tải từ nút: tải một nút sau khi gửi biểu mẫu.

Mô-đun này có thể giúp bạn nếu:

• bạn cần tùy chỉnh thông báo xác nhận
• bạn cần gửi một hình thức liên lạc mà không cần tải lại trang.
• bạn muốn tải một văn bản tùy chỉnh hoặc một nút khác sau khi gửi biểu mẫu.