Intereting Posts
Настройте, как выглядит тема WordPress в разделе «Выбор темы» Любой способ отключить /wp-login.php перенаправление на папку сайта? Можем ли мы использовать одну установку WordPress для нескольких баз данных, доменов и каталогов контента Воспроизведение иерархического списка из wp_list_categories с использованием get_categories () Несколько изображений за сообщение – Показать случайное изображение в другом месте WP Query: странное поведение с несколькими неиерархическими налогами Как отключить все admin jQuery с помощью WHMCS Как установить параметры экрана по умолчанию? Создание страниц для содержимого базы данных Валидация данных Удаление списка размеров изображений по умолчанию в Media Box WordPress Страница Все содержимое в шаблоне Хорошая или плохая конвенция? Обновите локальную версию WordPress – ссылки указывают на живой сайт Форма страницы опциона не работает Изменить ссылку для добавления новых кнопок в пользовательский тип сообщения

Confused on AJAX отправить форму через шаблон страницы

Я думаю, что искал слишком много кода и смутил себя, пытаясь лучше понять формы в WordPress с AJAX. На этой неделе я изложил, как создать форму для страницы и отправить ее через AJAX.

Страница – это шаблон и действие, которое я рассмотрел в двух решениях обработки. Один через перенаправление на PHP, например:

<form action="<?php echo get_template_directory_uri() . "/validation.php"; ?>" id="contactForm"> </form> 

после прочтения нескольких сообщений по этой теме, следует сделать отдельную проверку формы. Это правильно и почему? Тогда другая проблема: если я хочу обработать форму на странице шаблона, то действие формы должно выглядеть так:

 <form action="#" id="contactForm"> </form> 

но вне WordPress я видел:

 <form action="" id="contactForm"> </form> 

почему это? На части AJAX я видел разницу:

 jQuery.ajax({ type :"post", url: ajaxurl, } }); 

то другой URL-адрес:

 jQuery.ajax({ type :"post", dataType:"json", url: MBAjax.admin_url, } }); 

И наконец:

 jQuery.ajax({ type :"post", dataType:"json", url: /wp-admin/admin-ajax.php?action=contactForm", } }); 

Итак, каков правильный способ написать действие в WordPress, если:

  • Если форма обрабатывается на одной странице?
  • Если отдельный файл PHP проверяет форму?

Тогда каков правильный вызов AJAX в WordPress?

Ориентир:

  • Подача формы с использованием AJAX и обработки ответа на сайте WordPress
  • Отправка HTML-формы с использованием JQuery AJAX
  • Обращение с формой Ajax submit
  • Пользовательская форма с Ajax
  • Отправка формы с помощью ajax в WordPress
  • отправка формы в wordpress с помощью ajax
  • Представление Ajax Form Post с использованием WordPress
  • Как создать свою собственную контактную форму WordPress и почему

Редактировать:

После дальнейшего чтения было принято решение перейти к материалам RESTful. Я ссылался на « REST API для абсолютных начинающих », но я не получаю возврат, на который надеюсь:

HTML:

 <form id="contactForm" action="" method="POST"> <div class="form-group"> <label for="form_email"><span class="asterisk">*</span>Email address:</label> <input type="email" class="form-control" id="form_email"> </div> <div class="form-group"> <button id="form_submit" class="supportbutton" type="submit">Submit</button> </div> </form> <div id="testForm"></div> 

JQuery:

 $(document).ready(function() { $('#contactForm').submit(function(e) { e.preventDefault(); jQuery.ajax({ url: '<?php echo home_url(); ?>/wp-json/darthvader/v1/contact', type: 'post', dataType: 'json', data: $('#contactForm').serialize(), success: function(data) { $("#testForm").html(data); }, error: function() { alert("There was an issue"); }, }); }); }); 

functions.php:

 add_action('rest_api_init', function() { register_rest_route('darthvader/v1', '/contact/', array( 'methods' => 'POST', 'callback' => 'darth_contact_form' )); }); function darth_contact_form(\WP_REST_Request $request) { $email = $request['form_email']; return "Your contact request had the title " . $email; } по add_action('rest_api_init', function() { register_rest_route('darthvader/v1', '/contact/', array( 'methods' => 'POST', 'callback' => 'darth_contact_form' )); }); function darth_contact_form(\WP_REST_Request $request) { $email = $request['form_email']; return "Your contact request had the title " . $email; } 

Почему я получаю только Your contact request had the title по возврату, а не по электронной почте?

Solutions Collecting From Web of "Confused on AJAX отправить форму через шаблон страницы"

 <form action="<?php echo get_template_directory_uri() . "/validation.php"; ?>" id="contactForm"> 

😱

Поэтому я опишу основные основы, поэтому у вас есть структура для перемещения вперед с помощью

Исправление Admin AJAX

Поэтому я расскажу об этом очень кратко, поскольку это не суть моего ответа, но будет полезно:

  • Добавьте скрытое поле ввода с именем action а не добавьте его в URL-адрес
  • validation.php и любые другие автономные файлы должны гореть огнем тысячи солнц, выполнять эту проверку в JS и снова в обработчике формы. Обработка формы и ее проверка – это один и тот же шаг, иначе кто-то может пропустить проверку и перейти непосредственно к обработке

Наконец, используйте стандартный обработчик формы, когда JS не используется / возможно, проверьте наличие чего-то в форме, которое произойдет только в том случае, если оно было отправлено, и отправьте форму на ту же страницу, указав пустой атрибут действия например:

 if ( !empty( $_POST['form_page'] ) ) { $valid = false; // do validation // if ( true === $valid ) { // yay do whatever submitting the form is meant to do // if it's a multipage form, handle that here } else { get_template_part( 'form' ); // show the form again, but with warnings for validation } } else { get_template_part( 'form' ); } 

Представления RESTful Form

Измените darthvader/v1/contact формы jQuery на использование конечной точки REST, позвоните в этот darthvader/v1/contact , я использовал код из ответа stackoverflow здесь :

 jQuery('input#submitButton').click( function() { jQuery.ajax({ url: '/wp-json/darthvader/v1/contact', type: 'post', dataType: 'json', data: jQuery('form#contactForm').serialize(), success: function(data) { //... do something with the data... } }); }); 

Это почти всякая форма подачи через REST API, который вам когда-либо понадобится, но вам все еще нужна эта конечная точка, '/ wp-json / darthvader / v1 / form' нуждается в создании, поэтому давайте сообщите WP, что мы хотим конечную точку, которая принимает Пост:

 add_action( 'rest_api_init', function () { register_rest_route( 'darthvader/v1', '/contact/', array( 'methods' => 'POST', 'callback' => 'darth_contact_form' ) ); } ); 

Затем определите, что произойдет, когда оно будет вызвано:

 function darth_contact_form( \WP_REST_Request $request ) { // } 

Вот где мы будем обрабатывать нашу форму, например:

 function darth_contact_form( \WP_REST_Request $request ) { $title = $request['title']; $message = $request['message']; // send an email or create a post, or whatever // the contact form does when its submitted return "Your contact request had the title ".$title; } 

Возвращаемое значение превращается в JSON и отправляется обратно в браузер, так что вы можете обработать его в функции успеха в javascript, которую вы видели ранее в этом ответе. Вы также можете вернуть другие ответы, например:

 return \WP_REST_Response( "Bad request, XY and Z are empty", 400); 

и вы можете вернуть объект WP_Error чтобы указать что-то неправильное или неправильное:

 return new WP_Error( 'awesome_no_author', 'Invalid author', array( 'status' => 404 ) ); 

Вы можете сделать свою проверку внутри конечной точки, но вы также можете сделать конечную точку для проверки, указав, какие поля ожидать, и функцию для проверки их, но я оставляю это как упражнение (или новый вопрос) для вас

Каждый процесс AJAX имеет 4 основных этапа:

  1. Отправить запрос на сервер асинхронно
  2. Обработка задач на стороне сервера
  3. Получить ответ с сервера
  4. Внесите изменения на стороне клиента на основе ответа сервера

Создание запроса на сервер

Есть много способов и способов сделать это. Это можно сделать как с помощью jQuery, так и с помощью JavaScript. Однако, поскольку jQuery упростил, я собираюсь использовать это. jQuery предлагает 3 различные функции с аналогичной функциональностью. Эти функции:

  • $.ajax(); – Поддерживает методы POST и GET
  • $.get(); – Простой метод GET
  • $.post(); – Простой метод POST

Поскольку я не уверен, какой метод вы собираетесь использовать, я $.ajax(); с $.ajax(); , Я отправлю пример кода на сервер, а затем покажу сообщение на основе ответа сервера. Давайте объявим функцию jQuery, которая обрабатывает наше представление.

Эта функция отправит имя пользователя на сервер.

 function sendMyForm( string ) { // Begin an Ajax request $.ajax({ type: 'POST', // Submission method url: url_object.url_string + '/wp-json/darthvader/ajax_submission', // I will explain this later data: { username : string }, // Data to be sent to server dataType: 'json', // You should set this to JSON if you are going to use the REST api beforeSend: function(){ // Let's show a message while the request is being processed $('#status').html('<span>Processing</span>'); }, success: function ( response ) { // The Ajax request is successful. This doesn't mean the // sever was able to do the task, it just means that the // server did send a response. So, let's check the response if( response.success == true ) { $('#status').html('<span>Success</span>'); $('#message').html('<span>' + response.message + '</span>'); } else { $('#status').html('<span>Failed</span>'); $('#message').html('<span>' + response.message + '</span>'); } }, error: function(){ // The request wasn't successful for some reason $('#status').html('<span>Unknown error.</span>'); } }); }; 

Итак, теперь нам нужно привязать действие к нашей кнопке. Есть много способов сделать это тоже. Например, предотвратить подачу формы, сериализацию данных и многое другое. Я даже не собираюсь создавать форму.

Я собираюсь создать собственный HTML div, чтобы продемонстрировать, что нам даже не нужна форма. Вот наш HTML, который выглядит как форма:

 <div> <p id="status"></p> <p id="message"></p> <input id="my-input" type="text"/> <span id="button">This is our button!</span> </div> 

Теперь давайте привяжем действие клика к нашей кнопке, на самом деле это не кнопка! Обманул тебя.

 $('#button').on('click',function(){ // Get the value of our input box var username = $('#my-input').val(); // Call our Ajax function and pass the username to it sendMyForm( string ); }); 

Хорошо, теперь форма будет отправлена ​​по клику пользователя.

Создание маршрута для обработки запроса

Поскольку я объявлял тип данных как JSON, я собираюсь использовать REST API, который по умолчанию выводит наш контент как JSON.

Вы можете использовать все, что пожелаете, например admin Ajax, если это хорошая практика и не влияет на производительность или не вызывает проблемы с безопасностью.

Давайте сейчас зарегистрируем маршрут REST.

 add_action( 'rest_api_init','my_rest_route' ); function my_rest_route() { register_rest_route( 'darthvader', // Base path here '/ajax_submission/', // Child path array( 'methods' => 'POST', 'callback' => 'darth_contact_form' ) ); } 

Теперь пришло время для настоящего удовольствия. Давайте обрабатывать полученные данные, не так ли?

 function darth_contact_form( \WP_REST_Request $request ){ // Get the data that was sent to server $data = $request['username']; // Check if it's empty and send the response if( !empty( $data ) ){ // Remember these from our Ajax call? This is where we set them $response['status'] = true; $response['message'] = 'You have entered a username!'; } else{ $response['status'] = false; $response['message'] = 'Why didn\'t you enter a username?'; } // Don't forget to return the data return $response; } 

Последний штрих

Помните эту строку?

 url: url_object.url_string 

Это путь к нашему маршруту REST. Поскольку домен может измениться, разумно сформировать его динамически, используя wp_localize_script . Для этого мы сохраняем все наши скрипты в файл с именем script.js а затем вставляем и локализуем его.

 wp_enqueue_script( 'my-script', get_template_directory_uri().'/js/script.js', array( 'jquery' ), '', true ); $localized = array( 'url_string' => site_url(), // This is where that url_string came from ); wp_localize_script( 'my-script', 'url_object', $localized ); 

Теперь мы можем получить доступ к site_url(); используя url_object.url_string в нашем скрипте!

Вот и все. Нажмите кнопку и получайте удовольствие.