Как вставить данные в базу данных в WordPress с помощью Ajax

Вы ищете способ вставки данных в базу данных WordPress с помощью Ajax? Читайте дальше, так как мы поделимся простыми шагами, которые вам нужно выполнить, чтобы добиться этого.

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

Ajax означает отправку данных в базу данных или на сервер без перезагрузки страницы. Это гарантирует, что посетитель не покинет ваш сайт или текущую страницу. Кроме того, это экономит много времени, особенно при заполнении большой формы.

Давайте приступим к делу.

Резюме

• Создать форму
• Получите все данные формы с помощью JQuery и отправьте данные через Ajax
• Получить и вставить данные в базу данных

Создать форму

Первым шагом является создание формы. При отправке формы через запрос Ajax в WordPress вы можете отправлять данные через Ajax и получать доступ к функции внутри вашей темы через URL-адрес admin_url('admin-ajax.php'); чтобы безопасно связаться с администратором.

Вы можете узнать больше об этом URL-адресе в документации Ajax, предоставленной WordPress.

Чтобы создать форму, скопируйте и вставьте этот код туда, где вы хотите его отобразить. Вы можете отобразить его в файле index.php, single.php, page.php или даже в файле sidebar.php.

	<div class="container">
		<h1>WordPress AJAX Insert Post Demo</h1>
		<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
			<div class="form-group">
				<label for="">Enter Title</label>
				<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
			</div>
			<div class="form-group">
				<label for="">Enter Description</label>
				<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
			</div>
		</form>
	</div>

Получите все данные формы с помощью JQuery и отправьте данные через Ajax

В этом разделе мы будем использовать jQuery для достижения результата. В качестве альтернативы вы также можете использовать ванильный JavaScript для достижения того же результата.

Прежде чем продолжить, не забудьте обратить внимание на переменную действия внутри объекта данных внутри функции $.ajax(). Это потому, что мы будем использовать функцию внутри функции Ajax.

$("#enquiry_email_form").on("submit", function (event) {

event.preventDefault();

var form= $(this);

var ajaxurl = form.data("url");

var detail_info = {

post_title: form.find("#post_title").val(),

post_description: form.find("#post_description").val()

}

if(detail_info.post_title === "" || detail_info.post_description === "") {

alert("Fields cannot be blank");

return;

}

$.ajax({

url: ajaxurl,

type: 'POST',

data: {

post_details : detail_info,

action: 'save_post_details_form' // this is going to be used inside wordpress functions.php

},

error: function(error) {

alert("Insert Failed" + error);

},

success: function(response) {

alert("Insert Success" + response);

}

});

})

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

Получить и вставить данные в базу данных

Во-первых, давайте напишем функцию WordPress Ajax для захвата данных и вставки их в базу данных.

//Saving Ajax Data

add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');

Строка в приведенном выше коде состоит из двух основных частей. Это nopriv и save_post_details_form.

Часть nopriv означает, что Ajax потерпит неудачу, если пользователь вошел в систему. Однако, если пользователь не вошел в систему, триггер Ajax сработает.

Форма save_post_details_form — это то, что мы написали в коде JavaScript внутри $.ajax() в объекте данных. Стоит отметить, что функция не будет работать, если она не соответствует должным образом.

Другой аргумент в функции add_action — это имя функции, которая собирает данные и делает все, что мы хотим.

Последний шаг — вернуть действие true или false в зависимости от результата и отобразить его во внешнем интерфейсе.

function save_enquiry_form_action() {

$post_title = $_POST['post_details']['post_title'];

$post_description = $_POST['post_details']['post_description'];

$args = [

'post_title'=> $post_title,

'post_content'=>$post_description,

'post_status'=> 'publish',

'post_type'=>post',

'post_date'=> get_the_date()

];

$is_post_inserted = wp_insert_post($args);

if($is_post_inserted) {

return "success";

} else {

return "failed";

}

}

Важно отметить, что вы можете настроить сообщение для отображения другого вывода.

Вывод

В этом коротком посте мы поделились тем, как вы можете вставлять данные в базу данных в WordPress с помощью Ajax. Условие 'if else' в последнем разделе сделает свое дело внутри Ajax, и вы сможете сделать итоговое сообщение более описательным.

Если вы не можете реализовать это решение, свяжитесь с нами. Если вы сделаете какую-либо ошибку, вы можете сломать свой сайт.

Мы надеемся, что этот пост помог вам научиться отправлять данные в базу данных без перезагрузки страницы.

Похожие статьи

1. Как получить зарегистрированные боковые панели WordPress с помощью цикла Foreach
2. Как отобразить название категории в WordPress на практическом примере
3. Как получить информацию о зарегистрированном пользователе в WordPress
4. Как создать поле флажка на странице оформления заказа WooCommerce