Пользовательская форма с Ajax
У меня возникли проблемы с моей формой. При нажатии кнопки отправки выдается ошибка 404. Буду благодарен за любые предложения.
Ajax-обработка формы. Код для JavaScript файла темы.
<script type="text/javascript">
jQuery('#BookingForm').submit(ajaxSubmit);
function ajaxSubmit(){
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action : 'make_booking',
type : "POST",
url : "/wp-admin/admin-ajax.php",
data : BookingForm,
success: function(data){
jQuery("#feedback").html(data);
}
});
return false;
}
</script>
PHP-код для файла functions.php
function makeBooking(){
global $wpdb;
$type = $_POST["optionsRadios"];
$to = $_POST["to"];
$from = $_POST["from"];
$date = $_POST["date"];
$time = $_POST["time"];
$name = $_POST["name"];
$tel = $_POST["tel"];
$email = $_POST["email"];
$passenger = $_POST["optionsRadios2"];
$other = $_POST["other"];
if( $wpdb->insert('Booking',
array(
'type'=>$type,
'from1'=>$from,
'to1'=>$to,
'date'=>$date,
'time'=>$time,
'name'=>$name,
'tel'=>$tel,
'email'=>$email,
'passenger'=>$passenger,
'other'=>$other
)
) === FALSE ) {
echo "Ошибка";
}
else {
echo "Отправка успешна, квитанция отправлена на ваш email адрес.
<br> Ваш ID бронирования:<b>ZCA- ".$wpdb->reference . "</b>";
// Подготовка тела email
$msg = "Ссылка: ZCA-" . $reference . "\nТип:" . $type . "\nОткуда:" . $from . "\nКуда:" . $to . "\nДата" . $date . "\nВремя:" . $time . "\nИмя:" . $name . "\nНомер:" . $tel . "\nEmail:" . $email . "\nПассажиры:" . $passenger . "\nДополнительно:" . $other;
mail("taxi@zcarsglobal.com","Бронирование",$msg);
mail($email,"Zcars Global Бронирование","Спасибо за ваш запрос. Мы постараемся обработать его как можно скорее." . $msg);
}
die();
}
add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // не особо нужно
Я прилагаю HTML-форму, так как все еще получаю ошибку 404, возможно, проблема здесь?
<form method="post" id="BookingForm">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="booking" value="booking" checked>
Бронирование
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="quotation" value="quotation">
Расчет стоимости
</label>
</div>
<div class="form-group">
<label for="from">Откуда *</label>
<input name="from" id="from" type="text" class="form-control" placeholder="Где вы находитесь?" required>
</div>
<div class="form-group">
<label for="to">Куда *</label>
<input name="to" id="to" type="text" class="form-control" placeholder="Куда вы направляетесь?" required>
</div>
<div class="form-group">
<label for="date">Дата *</label>
<input name="date" id="date" type="date" class="form-control" required min="<?php echo date("dd-mm-yyyy"); ?>">
</div>
<div class="form-group">
<label for="time">Время *</label>
<input name="time" id="time" type="time" class="form-control" required>
</div>
<div class="form-group">
<label for="name">Имя *</label>
<input name="name" id="name" type="text" class="form-control" placeholder="Как вас зовут?" required>
</div>
<div class="form-group">
<label for="tel">Номер телефона *</label>
<input name="tel" id="tel" type="number" class="form-control" placeholder="Ваш номер телефона?" required>
</div>
<div class="form-group">
<label for="email">Email *</label>
<input name="email" id="email" type="email" class="form-control" placeholder="Ваш email?" required>
</div>
<h4>Пассажиры</h4>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4orless" value="1to4" checked>
4 или меньше
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="4to6" value="4to6">
от 4 до 6
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios2" id="6to8" value="6to8">
от 6 до 8
</label>
</div>
<textarea name="other" class="form-control" rows="3">Пожалуйста, напишите здесь любую дополнительную информацию</textarea>
<input type="hidden" name="action" value="makeBooking"/>
<input type="submit">
</form>
Ваша попытка отправлять AJAX-запросы на wp-admin/admin-ajax.php верна, но лучше создать глобальную JavaScript-переменную с помощью wp_localize_script(), чтобы сделать доступными для вашего скрипта в functions.php данные, которые обычно можно получить только на серверной стороне WordPress.
Например, ваш JavaScript-код может находиться в той же папке, что и functions.php, следующим образом:
[Папка темы]
-->functions.php
-->js [папка] --> makebooking.js
Ваш jQuery-код в makebooking.js должен выглядеть так:
jQuery(document).ready(function(event) {
jQuery('#BookingForm').submit(ajaxSubmit);
function ajaxSubmit() {
var BookingForm = jQuery(this).serialize();
jQuery.ajax({
action: 'make_booking',
type: "POST",
url: MBAjax.admin_url,
data: BookingForm,
success: function(data) {
jQuery("#feedback").html(data);
}
});
return false;
}
});
При обработке данных функцией makeBooking() добавьте следующий код в начало вашего functions.php:
// Подключаем JavaScript-файл, который отправляет AJAX-запрос
wp_enqueue_script( 'make-booking-ajax','js/makebooking.js', array( 'jquery' ) );
// Объявляем URL к файлу, который обрабатывает AJAX-запрос (wp-admin/admin-ajax.php)
wp_localize_script( 'make-booking-ajax', 'MBAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
add_action('wp_ajax_make_booking', 'makeBooking');
Для дополнительной информации ознакомьтесь с 5 советами по использованию Ajax в WordPress

Привет, спасибо за твой замечательный ответ! Теперь я получаю не 404 ошибку, а пустую страницу после отправки. Один раз я даже получил весь HTML страницы внутри блока #feedback.

В твоем PHP коде отсутствует XHR-ответ. После отправки письма попробуй добавить echo "Спасибо за бронирование"
и замени die()
на exit;
. Кстати, ты нигде не определил переменную $reference
в своем коде. И наконец, проверь файл php_error.log для получения деталей.

Разве echo перед отправкой письма не достаточно? Спасибо за заметку про $reference, исправил это. Хм, php_error.log не показывает никаких ошибок за последние несколько дней. Это загадка.

add_action('wp_ajax_make_booking', 'makeBooking');
add_action('wp_ajax_nopriv_make_booking', 'makeBooking'); // необязательно
Поместите эти две строки выше функции makeBooking.
У меня сработало! Также посмотрите, как я отправляю действие в data!
$( "#signupFormTag" ).submit(function( event ) {
event.preventDefault();
var signupForm = jQuery(this).serialize();
jQuery.ajax({
// action : 'signup_paragon',
type : "POST",
url : "/paragaon-3/wp-admin/admin-ajax.php",
data : {
from: signupForm,
action: 'signup_paragon'
},
success: function(data){
console.log(data);
//jQuery("#feedback").html(data);
}
});
// return false;
});

Вы не можете использовать Ajax в WordPress таким образом. Существует множество руководств по использованию Ajax в WordPress. Я считаю, что самое простое решение можно найти здесь: http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

jQuery(document).ready(function($) {
// Выполнение AJAX-авторизации при отправке формы
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', // вызывает wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
