หลักการทำงานก็คือ เมื่อยูสเซอร์ป้อนข้อมูลเข้าไปในช่องป้อนข้อมูล แล้วกดปุ่ม Check เราจะเอาสิ่งที่เขาป้อนเข้ามา ส่งไปตรวจสอบที่เซิฟเวอร์ (ผ่านทาง AJAX) ว่าคำที่เขาป้อนเข้ามานั้น เป็นคำหยาบหรือเปล่า

โดยไฟล์ PHP ที่เซิฟเวอร์ก็ไม่ได้เขียนซับซ้อนอะไร แค่เอาคำที่ส่งมานั้น ไปตรวจดูใน array คำหยาบ ว่ามีคำนั้นหรือเปล่า ถ้ามี ก็บอกว่าพบ ถ้าไม่มีก็บอกว่า ไม่พบ

เมื่อ AJAX ได้รับคำตอบจากเซิฟเวอร์ว่า พบหรือไม่พบ ให้ alert บอกยูสเซอร์

ลองดูให้เข้าใจนะครับ เพราะจากโค้ดนี้สามารถเอาไปเขียนเพิ่มเติม หรือประยุกต์ ได้อีกมากมายมหาศาล อย่างเช่น แทนที่คำหยาบจะเก็บใน array ก็เก็บในฐานข้อมูลซะ ตอนจะเช็กคำหยาบ เอาคำที่ต้องการไปค้นหาในฐานข้อมูล ถ้าเจอ ก็เป็นคำหยาบ หรือแทนที่จะเช็กคำหยาบ แต่เอาไปประยุกต์ เช็กว่า username ที่ป้อนเข้ามานั้นมีคนลงทะเบียนไปหรือยัง ก็ได้

ประเด็นที่อยากจะให้เข้าใจ คือ การส่งข้อมูลไปยังเซิฟเวอร์ผ่าน AJAX และ การรับข้อมูลที่เซิฟเวอร์ส่งกลับมา มันง่ายเหี้ยบอกตามตรง

ไฟล์แรกที่จะเขียนคือไฟล์สำหรับเช็กคำหยาบ เมื่อมีการส่งข้อมูลมา เราจะเอาข้อมูลนั้นไปเช็กใน array ว่ามีหรือไม่มีก่อนจะตอบกลับ client ไป
สร้างไฟล์ชื่อ  bad-word.php

$badwords = array("fuck", "kuay", "dog", "ควาย", "ควย", "เหี้ย", "ดอ");
$inputword = $_POST["inputword"];
 
if(in_array($inputword, $badwords)){
	echo "found";
}else{
	echo "not found";
}

คำอธิบาย

สร้าง array เก็บคำหยาบ

$badwords = array("fuck", "kuay", "dog", "ควาย", "ควย", "เหี้ย", "ดอ");

เอาคำที่ส่งมาทาง AJAX ไปตรวจสอบว่าเป็นคำหยาบหรือไม่ ถ้าใช่ ให้ตอบกลับไปว่า found ถ้าไม่ใช่ให้ตอบกลับไปว่า not found ผมเคยเขียนบทความไว้ในเว็บไซต์แห่งนี้แหละครับว่า คำสั่ง echo นั้นไม่ใช่คำสั่งสำหรับแสดงผลออกทางหน้าจอภาพ แต่แท้ที่จริงแล้วมันคือคำสั่งสำหรับส่งข้อมูลกลับไปยัง client

$inputword = $_POST["inputword"];
 
if(in_array($inputword, $badwords)){
	echo "found";
}else{
	echo "not found";
}

ทีนี้มาถึงไฟล์หลักที่เราจะสร้างฟอร์มให้ยูสเซอร์ป้อนคำ และเขียนคำสั่ง AJAX ส่งคำนั้นๆไปตรวจสอบที่ไฟล์ bad-word.php ว่าเป็นคำหยาบหรือไม่
สร้างไฟล์ชื่อ check-input.php

<html>
<head>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#check").click(function(){
			$.ajax({
					url: "bad-word.php",
					data: {inputword : $("#inputword").val()},
					success: function(ret){
						if(ret=="found"){
							alert("Ban");
						}else{
							alert("Un ban");
						}
					},
					type: "POST"
			});
		});
	});
</script>
</head>
<body>
	<form action="">
		<input type="text" name="inputword" id="inputword">
		<input type="button" id="check" value="Check" />
	</form>
</body>
</html>

คำอธิบาย

ตอนแรกทำโครงสร้าง html และสร้างฟอร์มขึ้นมา โดยในฟอร์มมีแค่เท็กบ้อก 1 อัน กับปุ่มอีก 1 ปุ่ม action ของฟอร์มไม่ต้องระบุอะไร เพราะเราจะใช้ AJAX เป็นตัวส่งข้อมูลไปยังเซิฟเวอร์

	<form action="">
		<input type="text" name="inputword" id="inputword">
		<input type="button" id="check" value="Check" />
	</form>

include jQuery เข้ามา

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

เขียนคำสั่ง AJAX ให้มันทำงานอย่างที่เราต้องการ
– เมื่อยูสเซอร์คลิกที่ปุ่ม #check ให้ส่งข้อมูลไปยังเซิฟเวอร์ url:ที่ไฟล์ไหน data:ข้อมูลที่ส่งไปคืออะไร success:เมื่อเซิฟเวอร์ตอบกลับมาให้เอาข้อมูลที่ได้ไปทำอะไร type:ส่งข้อมูลไปแบบไหน

<script type="text/javascript">
	$(document).ready(function(){
		$("#check").click(function(){
			$.ajax({
					url: "bad-word.php",
					data: {inputword : $("#inputword").val()},
					success: function(ret){
						if(ret=="found"){
							alert("Ban");
						}else{
							alert("Un ban");
						}
					},
					type: "POST"
			});
		});
	});
</script>

เสร็จแล้ว ใช้ 2 ไฟล์ AJAX มันก็มีเท่านี้แหละครับท่าน กล้วยๆ สุกรๆ

ajax PHP
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ