Запрос WordPress AJAX POST не работает: страница обновляется вместо отображения результата в модальном режиме ⇐ Jquery

[Anonymous]

Я создал функцию AJAX в WordPress для отправки запроса POST и отображения результата в модальном режиме после успешного завершения без обновления страницы. Однако код AJAX не работает. Когда я нажимаю кнопку, страница обновляется вместо отображения результата в модальном окне. Я пишу свой код в файле function.php.
Я реализовал функцию AJAX в WordPress для отправки запроса POST. Я ожидал, что после успешного завершения результат будет отображаться в модальном режиме без обновления страницы.
//add API
function enqueue_custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/ ... per.min.js', array('jquery'), null, true);
wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/boot ... rap.min.js', array('jquery'), null, true);

wp_enqueue_script('custom-ajax', 'https://cdnjs.cloudflare.com/ajax/libs/ ... nts.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

//function add_enqueue_JS(){
// wp_enqueue_script('API_SRTB_Voyage', get_stylesheet_directory_uri().'/assets/js/custom.js', array('jquery'));
//}
//add_action('wp_enqueue_scripts', 'add_enqueue_JS');

function display_voyage_form() {
ob_start();

// Fetch data from the API
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://127.0.0.1:8000/api/post/planificationVoyage');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
$headers = array();
$headers[] = 'Content-Type: application/json';
$headers[] = 'Authorization: Bearer mytoken';

curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$result = curl_exec($ch);
if (curl_errno($ch)) {
echo 'Error:' . curl_error($ch);
}
curl_close($ch);

$response = json_decode($result, true);

?>


Select Line






Aller
Retour


Send Request




jQuery(document).ready(function($) {
$('#voyageForms').on('submit', function(event) {
event.preventDefault();
var formData = $(this).serialize();
console.log(formData);
$.ajax({
url: '',
type: 'POST',
data: {
action: 'submit_voyage_form',
form_data: formData
},
success: function(response) {
if (response.success) {
var tableBody = $("#tableBody");
tableBody.empty();
var data = response.data;
data.forEach(function(row, index) {
tableBody.append("" + row.DISTANCE_KM +
"" + row.DUREE + "" + row.HEURE_DEPART +
"" + row.ARRIVEE + "" + row.DEPART +
"" + (index + 1) + "");
});
$("#resultModal").modal("show");
} else {
alert('Error: ' + response.data);
}
}
});
});
});






بيانات الرحلات

×





المسافة
مدة الرحلة
وقت المغادرة
الوصول الى
الانطلاق من
#







Close








Подробнее здесь: https://stackoverflow.com/questions/786 ... playing-re