วิธีแทรกข้อมูลในฐานข้อมูลใน 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 เมื่อคุณคลิกปุ่มส่ง เราจำเป็นต้องดึงค่าภายใน 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 คือชื่อของฟังก์ชันเพื่อดึงข้อมูลและทำทุกอย่างที่เราต้องการ

ขั้นตอนสุดท้ายคือการคืนค่าการกระทำจริงหรือเท็จขึ้นอยู่กับผลลัพธ์ และแสดงไว้ที่ส่วนหน้า

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 loop
2. วิธีแสดงชื่อหมวดหมู่ใน WordPress โดยใช้ตัวอย่างที่เป็นประโยชน์
3. วิธีการเข้าสู่ระบบข้อมูลผู้ใช้ใน WordPress
4. วิธีสร้างช่องทำเครื่องหมายในหน้าชำระเงินของ WooCommerce