كيفية إدراج البيانات في قاعدة البيانات في 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 لتحقيق النتيجة. بدلاً من ذلك ، يمكنك أيضًا استخدام Vanilla 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 ، بمجرد النقر فوق زر الإرسال. نحتاج إلى جلب القيم داخل وظائف السمة .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 هي اسم الوظيفة للاستيلاء على البيانات والقيام بأي شيء نريده.

الخطوة الأخيرة هي إرجاع الإجراء صوابًا أو خطأً بناءً على النتيجة ، وعرضه على الواجهة الأمامية.

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. كيفية الحصول على ووردبريس الشريط الجانبي المسجل مع حلقة Foreach
2. كيفية عرض اسم الفئة في WordPress باستخدام مثال عملي
3. كيفية تسجيل الدخول إلى معلومات المستخدم في WordPress
4. كيفية إنشاء خانة اختيار في صفحة الخروج من WooCommerce