ตัวอย่างการใช้งานต่อไปนี้ เป็นการนำ ระบบค้นหาคำศัพท์ จากเว็บไซต์
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>
