Menggunakan borang Ajax di Drupal 8

Takeaways Key

API Drupal 8 Ajax membolehkan bentuk yang bersih dan mesra pengguna tanpa memerlukan kod JavaScript. Ini dapat dicapai dengan Ajaxifying beberapa tingkah laku bentuk.
Logik pengesahan e -mel boleh dipindahkan ke panggilan balik AJAX, yang mencetuskan pengesahan dan mencetak mesej tanpa memerlukan penyerahan borang. Ini adalah tingkah laku biasa dalam bentuk dan berfungsi sebagai latihan yang baik untuk memahami Ajax di Drupal 8.
AJAX API membolehkan penyesuaian tingkah laku bentuk. Kaedah panggil balik AJAX dalam kelas bentuk menerima pelbagai bentuk dan bentuk objek keadaan, melakukan pengesahan dan mengembalikan respons AJAX dengan pelbagai arahan bergantung kepada hasil pengesahan.
Ajax juga boleh digunakan di Drupal 8 di luar bentuk, seperti menambah kelas Use-Ajax ke mana-mana pautan. Ini membolehkan Drupal membuat permintaan AJAX ke URL dalam atribut HREF apabila pautan diklik, mengembalikan arahan AJAX dan melakukan pelbagai tindakan yang diperlukan.

Dalam artikel ini, saya akan menunjukkan kepada anda cara yang bersih menggunakan API Drupal 8 Ajax tanpa menulis satu baris kod JavaScript. Untuk tujuan ini, kami akan kembali ke bentuk tersuai pertama yang kami bina untuk Drupal 8 dalam artikel sebelumnya dan

ajaxify beberapa tingkah lakunya untuk menjadikannya lebih mesra pengguna.

Versi terkini borang ini boleh didapati di repositori ini di bawah nama Demoform (modul demo). Kod yang kami tulis dalam artikel ini juga boleh didapati di sana tetapi di cawangan berasingan yang dipanggil Ajax. Saya cadangkan anda mengklonkan repo dan memasang modul dalam persekitaran pembangunan anda jika anda mahu mengikuti.

Demoform

Walaupun tidak dinamakan, demoform sangat membantu dalam menggambarkan asas -asas menulis bentuk tersuai di Drupal 8. Ia mengendalikan pengesahan, konfigurasi dan mencontohkan penggunaan API bentuk secara umum. Sudah tentu, ia memberi tumpuan kepada asas -asas dan tidak ada yang luar biasa.

Jika anda ingat, atau periksa kod tersebut, anda akan melihat bahawa borang itu membentangkan satu medan teks tunggal yang bertanggungjawab untuk mengumpul alamat e -mel untuk disimpan sebagai konfigurasi. Pengesahan bentuk bertanggungjawab memastikan bahawa e -mel yang dikemukakan mempunyai .com berakhir (percubaan yang buruk pada itu tetapi cukup untuk menggambarkan prinsip pengesahan bentuk). Oleh itu, apabila pengguna mengemukakan borang tersebut, mereka menyimpan alamat e -mel baru ke konfigurasi dan mendapatkan mesej pengesahan yang dicetak ke skrin.

Dalam artikel ini, kami akan memindahkan logik pengesahan e -mel ke panggilan balik AJAX supaya selepas pengguna selesai menaip alamat e -mel, pengesahan akan dicetuskan secara automatik dan mesej yang dicetak tanpa mengemukakan borang. Sekali lagi, tidak ada yang luar biasa tentang tingkah laku ini dan anda akan melihatnya agak kerap dalam bentuk di alam liar (biasanya untuk mengesahkan nama pengguna). Tetapi ia adalah latihan yang baik untuk melihat Ajax di Drupal 8.

bentuk ajax

Perkara pertama yang perlu kita lakukan ialah memindahkan logik pengesahan e -mel dari validateform umum () ke kaedah yang hanya mengendalikan aspek ini:

<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>

seperti yang anda perhatikan, kami juga telah menukar logik sedikit untuk memastikan alamat e -mel berakhir dengan .com.

Kemudian, kita boleh menangguhkan logik ini dari kaedah pengesahan utama untuk memastikan tingkah laku kita yang ada masih berfungsi:

<span>/**
</span><span> * <span>{@inheritdoc}
</span></span><span> */
</span><span>public function validateForm(array &$form, FormStateInterface $form_state) {
</span>  <span>// Validate email.
</span>  <span>if (!$this->validateEmail($form, $form_state)) {
</span>    <span>$form_state->setErrorByName('email', $this->t('This is not a .com email address.'));
</span>  <span>}
</span><span>}</span>

Dengan cara ini walaupun borang kami mendapat entah bagaimana dikemukakan (secara programatik atau sebaliknya), pengesahan masih akan dijalankan.

Seterusnya, kita perlu beralih kepada definisi borang kami, khususnya medan e -mel, dan menjadikannya mencetuskan permintaan AJAX berdasarkan interaksi pengguna. Ini akan menjadi tindakan pengguna yang mengubah nilai medan dan membuang fokus daripadanya:

<span>$form['email'] = array(
</span>  <span>'#type' => 'email',
</span>  <span>'#title' => $this->t('Your .com email address.'),
</span>  <span>'#default_value' => $config->get('demo.email_address'),
</span>  <span>'#ajax' => [
</span>    <span>'callback' => array($this, 'validateEmailAjax'),
</span>    <span>'event' => 'change',
</span>    <span>'progress' => array(
</span>      <span>'type' => 'throbber',
</span>      <span>'message' => t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' => '<span></span>'
</span><span>);</span>

Apa yang kami lakukan baru di sini ialah menambah kekunci #AJAX ke array dengan beberapa kunci yang berkaitan. Di samping itu, kami menambah sedikit markup selepas elemen bentuk sebagai pembalut untuk mesej ringkas mengenai kesahihan e -mel.

Panggilan balik di dalam array #AJAX ke kaedah di dalam kelas borang kami (ValateDeMailajax ()) manakala acara itu menambah JavaScript mengikat ke elemen bentuk ini untuk acara JQuery Change. Sebagai alternatif, anda juga boleh menentukan kunci laluan dan bukannya panggilan balik, tetapi dalam kes kami, ia bermakna juga perlu menubuhkan laluan dan pengawal yang kelihatannya berlebihan. Dan kami tidak mahu kunci pembalut kerana kami tidak berhasrat untuk mengisi kawasan dengan kandungan yang dikembalikan tetapi ingin menyempurnakan tindakan yang disebabkan oleh panggilan balik. Untuk itu, kami akan menggunakan arahan AJAX.

Untuk mengetahui lebih lanjut mengenai semua ini, saya menggalakkan anda untuk berunding dengan halaman AJAX API atau entri API Borang untuk Ajax. Terdapat segelintir pilihan lain yang boleh anda gunakan untuk menyesuaikan tingkah laku Ajax elemen bentuk anda.

Sekarang sudah tiba masanya untuk menulis kaedah panggil balik di dalam kelas bentuk kami. Ini menerima array $ borang dan $ form_state objek sebagai argumen yang datang dari bentuk yang mencetuskan permintaan Ajax:

<span>/**
</span><span> * Ajax callback to validate the email field.
</span><span> */
</span><span>public function validateEmailAjax(array &$form, FormStateInterface $form_state) {
</span>  <span>$valid = $this->validateEmail($form, $form_state);
</span>  <span>$response = new AjaxResponse();
</span>  <span>if ($valid) {
</span>    <span>$css = ['border' => '1px solid green'];
</span>    <span>$message = $this->t('Email ok.');
</span>  <span>}
</span>  <span>else {
</span>    <span>$css = ['border' => '1px solid red'];
</span>    <span>$message = $this->t('Email not valid.');
</span>  <span>}
</span>  <span>$response->addCommand(new CssCommand('#edit-email', $css));
</span>  <span>$response->addCommand(new HtmlCommand('.email-valid-message', $message));
</span>  <span>return $response;
</span><span>}</span>

Cukup, dalam kaedah ini, kami melakukan pengesahan dan mengembalikan respons AJAX dengan pelbagai arahan yang berbeza bergantung kepada hasil pengesahan. Dengan CSSCommand kami menggunakan beberapa CSS terus ke elemen borang e -mel manakala dengan HTMLCommand kami menggantikan kandungan pemilih yang ditentukan (ingat akhiran dari elemen bentuk kami?).

arahan ini cukup banyak peta untuk fungsi jQuery supaya mereka agak mudah dipahami. Anda boleh mencari senarai semua arahan yang ada di halaman ini. Dan kerana kita menggunakan tiga kelas baru di dalam kaedah ini, kita harus ingat untuk juga menggunakan mereka di bahagian atas:

<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>

dan itu cukup banyak. Jika anda membersihkan cache dan tambah nilai borang anda, menaip ke medan e -mel dan mengeluarkan fokus akan mencetuskan panggilan balik untuk mengesahkan alamat e -mel. Anda akan melihat ikon Throbber kecil di sana (yang boleh diubah dalam definisi) dan mesej ringkas yang kami tentukan juga. Alamat e -mel betul harus menyerlahkan medan dalam hijau dan mencetak mesej OK sementara sebaliknya warna merah digunakan dengan mesej yang bertentangan.

Jika kami telah menetapkan pembungkus dalam definisi elemen bentuk, kami boleh mengembalikan beberapa kandungan (atau membuat array) yang akan diletakkan di dalam pemilih itu. Oleh itu, anda mempunyai pilihan untuk memilih antara kandungan yang kembali atau perintah Ajax tetapi saya mencadangkan yang terakhir untuk kebanyakan kes kerana mereka menawarkan tingkah laku yang lebih fleksibel (dan konsisten).

Kesimpulan

Dalam artikel ini kita telah melihat contoh menggunakan Ajax untuk memperbaiki bentuk kami dan menjadikannya lebih mesra kepada pengguna akhir. Dan kami telah menulis garis sifar JavaScript yang tepat untuk mencapai ini.

Dalam kes kita, ia benar -benar adalah perkara keutamaan atau fancification . Tetapi jika anda berurusan dengan borang 20 medan yang mempunyai pengesahan pada pelbagai bidang yang serupa dengan ini, menggunakan Ajax benar -benar masuk akal. Ia tidak mengganggu pengguna dengan perlu menghantar borang hanya untuk merealisasikan input mereka tidak sah.

Walaupun bentuk adalah kawasan utama di mana anda akan melihat Ajax di Drupal 8, terdapat beberapa cara lain yang boleh anda memanfaatkannya tanpa menulis JavaScript.

Sekali cara yang bagus adalah untuk menambah kelas Use-Ajax pada sebarang pautan. Ini akan mempunyai Drupal membuat permintaan AJAX ke URL dalam atribut HREF apabila pautan diklik. Dari panggil balik, anda boleh mengembalikan arahan Ajax dan melakukan pelbagai tindakan yang diperlukan. Tetapi perlu diingat bahawa jQuery dan skrip teras lain tidak dimuatkan pada semua halaman untuk pengguna tanpa nama (oleh itu Ajax akan secara anggun merendahkan ke tingkah laku pautan biasa). Oleh itu, pastikan anda memasukkan skrip ini untuk pengguna tanpa nama jika anda memerlukan tingkah laku ini.

soalan yang sering ditanya mengenai menggunakan Ajax dalam bentuk Drupal 8

Bagaimana saya boleh melaksanakan Ajax dalam bentuk Drupal 8? Pertama, anda perlu menentukan bentuk yang termasuk panggilan balik Ajax. Ini boleh dilakukan dalam kaedah binaan bentuk. Harta '#ajax' harus ditambah ke elemen bentuk yang akan mencetuskan permintaan Ajax. Harta ini adalah array yang merangkumi kunci 'panggil balik', yang menentukan kaedah yang akan dipanggil apabila elemen bentuk dicetuskan. Kaedah panggil balik harus mengembalikan objek respons AJAX yang mentakrifkan apa yang perlu dikemas kini pada halaman.

Apakah perintah panggil balik AJAX di Drupal 8? Perintah ini adalah kelas PHP yang melaksanakan CommandInterface. Drupal 8 termasuk beberapa arahan Ajax terbina dalam, seperti 'amaran', 'sisipkan', 'mengeluarkan', dan 'menggantikan', antara lain. Anda juga boleh membuat arahan Ajax tersuai dengan membuat kelas baru yang melaksanakan CommandInterface. , Anda perlu membuat kelas baru yang melaksanakan CommandInterface. Kelas ini harus menentukan kaedah render yang mengembalikan array dengan kunci berikut: 'perintah', yang merupakan nama perintah, dan 'kaedah', yang merupakan kaedah yang harus dipanggil pada sisi klien. Arahan ini juga boleh memasukkan data tambahan yang akan diserahkan kepada kaedah sisi klien.

Bagaimana saya boleh mengendalikan ralat Ajax dalam Drupal 8? Menggunakan kekunci 'ralat' dalam harta '#ajax' elemen borang. Kunci ini menentukan kaedah panggil balik yang akan dipanggil jika ralat berlaku semasa permintaan AJAX. Kaedah panggil balik harus mengembalikan objek respons AJAX yang mentakrifkan cara mengendalikan ralat. Unsur -unsur berganda pada halaman di Drupal 8, anda boleh mengembalikan pelbagai arahan dalam objek respons AJAX. Setiap arahan harus menentukan elemen yang akan dikemas kini dan tindakan yang akan dilakukan. Perintah akan dilaksanakan mengikut urutan yang ditambah ke objek tindak balas. Elemen pada halaman di Drupal 8, anda boleh menggunakan arahan 'Ganti'. Perintah ini memerlukan dua argumen: pemilih elemen untuk diganti, dan kandungan baru. Pemilih boleh menjadi pemilih jQuery yang sah.

Bagaimana saya boleh menggunakan Ajax untuk mengeluarkan elemen dari halaman di Drupal 8? , anda boleh menggunakan arahan 'keluarkan'. Perintah ini memerlukan satu hujah: pemilih elemen yang akan dikeluarkan. Pemilih boleh menjadi pemilih jquery yang sah.

Bagaimana saya boleh menggunakan Ajax untuk memasukkan kandungan ke dalam halaman di Drupal 8? boleh menggunakan perintah 'sisipkan'. Perintah ini memerlukan dua argumen: pemilih elemen di mana kandungan akan dimasukkan, dan kandungan baru. Kandungan boleh dimasukkan sebelum, selepas, atau di dalam elemen yang dipilih.

Bagaimana saya boleh menggunakan AJAX untuk memaparkan mesej amaran di Drupal 8? Perintah ini memerlukan satu hujah: mesej yang akan dipaparkan. Mesej boleh menjadi rentetan yang sah.

Bagaimana saya boleh menggunakan Ajax untuk mengarahkan ke halaman yang berbeza di Drupal 8? Gunakan perintah 'redirect'. Perintah ini memerlukan satu hujah: URL halaman untuk mengarahkan ke. URL boleh menjadi url yang sah.

Atas ialah kandungan terperinci Menggunakan borang Ajax di Drupal 8. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!