การสร้าง ajax dictionary จาก longdo ด้วย jQuery

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
ajax jquery dictionary longdo

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax jquery dictionary longdo

ดูแล้ว 14,857 ครั้ง


ตัวอย่างการใช้งานต่อไปนี้ เป็นการนำ ระบบค้นหาคำศัพท์ จากเว็บไซต์
http://dict.longdo.com/

ดู Longdo Dict Application Programming Interface (API) ได้ที่
http://dict.longdo.com/page/api

เหมาะสำหรับใครที่ต้องการนำระบบค้นหาคำศัพท์ dictionary รูปแบบ ajax ไปตกแต่งเว็บไซต์
โดยเฉพาะเว็บไซต์เกี่ยวกับการศึกษา

โดยจุดประสงค์หลักของเนื้อหา คือ ทำความคุ้นเคย กับการใช้งาน ajax ใน jQuery ซึ่งในเว็บไซต์ ก็ได้
นำเสนอไปหลายครั้ง หลายรูปแบบ แล้ว

ตัวอย่าง


วิธีการ
1.สร้างไฟล์ php ชื่อ ajax_translate.php ดังโค้ดด้านล่าง (คำอธิบายแสดงในโค้ด)

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
// ตรวจสอบว่ามีการส่งคำค้นมาหรือไม่
if(isset($_GET['keyword']) && trim($_GET['keyword'])!=""){
	$keyword=trim($_GET['keyword']);
	// นำผลลัพธ์การค้นหา จาก longdo dictionary มาไว้ในตัวแปร
	$data=file_get_contents("http://dict.longdo.com/mobile.php?search=".$keyword);	//
	echo strip_tags($data,"<a><table><td><tr><font><style><meta><br>"); // แสดงส่วนของเนื้อหาที่จำเป็นต้องแสดง
}else{ // กรณีไม่มีการส่งคำค้นมา
	echo "โปรดระบุคำที่ต้องการแปล";	// แสดงข้อความแจ้งเตือน
}
?>

2.สร้างไฟล์สำหรับทดสอบ demo_ajax_translate.php ตามโค้ดด้านล่าง กรุณาอ่านคำแนะนำในโค้ด
โดยจะมีอยู่ 3 ส่วน คือ
1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ
2.ส่วนของ element องค์ประกอบในการใช้งาน
3.ส่วนของ javascript โดยใช้งานผ่าน jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>longdo ajax dictionary</title>
<!--1.ส่วนของ css สำหรับกำหนดรูปแบบ สีข้อความ พื้นหลัง หรืออื่นๆ ตามต้องการ-->
<style type="text/css">
div#myblock_dict{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	margin:auto;
	width:350px;	
}
input#translate_it{
	background-color:#F6C;
	color:#FFF;	
	border:1px groove #F9C;
	cursor:pointer;
}
div#input_search{
	background-color:#000;
	color:#FFF;
	text-align:center;
}
div#context_search{
	border:1px solid #F9C;
	height:300px;
	overflow:auto;
}
div#context_search{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;	
	padding:5px;
	background-color:#FDEDFE;
}
div#context_search a{
	margin-left:3px !important;
	color:#F09;	
}
div#context_search td{
	padding:5px !important;
}
</style>
</head>

<body>


<!--2.ส่วนของ element องค์ประกอบในการใช้งาน-->
<div id="myblock_dict">
<div id="input_search">คำค้น
  <input type="text" name="keyword_q" id="keyword_q" />
  <input type="button" name="translate_it" id="translate_it" value="แปล" />
</div>
<div id="context_search">

</div>
</div>


<!--3.ส่วนของ javascript โดยใช้งานผ่าน jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
		// กำหนดตัวแปรสำหรับแสดงรูปกำลังโหลด
		var loading_img='
'; loading_img+=''; loading_img+='
'; $("#keyword_q").click(function(){ // เมื่อคลิกที่ช่องคำค้น // เพื่อสะดวกในการพิมพ์คำค้นใหม่ได้เลย $(this).select(); // ถ้ามีข้อความอยู่ ให้ทำการเลือกข้อความนั้น $("#context_search").html(""); // ล้างค่าข้อความผลลัพธ์เดิม ถ้ามี }); $("#translate_it").click(function(){ // เมื่อคลิกที่ปุ่มคำว่า แปล $("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์ // ใช้ ajax ใน jQuery ส่งข้อมูลแบบ get $.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val()) },function(data){ $("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา }); }); $("#keyword_q").keyup(function(event){ if(event.keyCode==13){ // เมื่อกดปุ่ม Enter ให้เริ่มการค้นหา $("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์ $.get("ajax_translate.php",{keyword:$.trim($("#keyword_q").val())},function(data){ $("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา }); } }); // เมื่อคลิกที่ลิ้งค์ ในผลลัพธ์ $("div#context_search a").live("click",function(){ var text_search=$.trim($(this).text()); // นำคำจากลิ้งค์ที่คลิก มาเก็บในตัวแปร $("#context_search").html(loading_img); // แสดงรูปกำลังโหลดในส่วนผลลัพธ์ $("#keyword_q").val(text_search); // นำคำจากลิ้งค์ไปแสดงที่ช่อง คำค้น $.get("ajax_translate.php",{keyword:text_search},function(data){ $("#context_search").html(data); // แสดงผลลัพธ์จากการค้นหา }); return false; }); }); </script> </body> </html>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ