กรอกฟอร์มขณะพิมพ์ด้วย AJAX จะ include ajax ใน Page ยังไงครับ
รบกวนสอบถามอาจารย์หน่อยครับ จากหัวข้อ กรอกฟอร์มขณะพิมพ์ด้วย AJAX
ผมได้ copy Source Code ทั้งสองส่วนมาใส่ 2 ไฟล์ คือ
ส่วน แรก :
<form>
<p>Username : <input type="text" id="user" name="user" /><span id="result"> </span></p>
<p>ลองพิมพ์คำว่า demon ลงในช่อง Username (ทีละตัว)</p>
<p>Email : <input type="text" id="email" name="email" /></p>
<p>Display Name : <input type="text" id="displayname" name="displayname" /></p>
</form>
<script type="text/javascript">
var doKeyUp = function(event){
// input เจ้าของ event (user)
var input = GEvent.element(event);
// พื้นที่แสดงผลรูปรอโหลด
var result = $E('result');
// แสดงรูปรอโหลด เพื่อบอกว่ากำลังส่งข้อมูลไปตรวจสอบ
result.innerHTML = '<img src="http://www.goragod.com/skin/img/wait.gif" alt="" />';
// ajax ส่งข้อมูลไปตรวจสอบ
var req = new GAjax();
req.send('find.php' , 'user=' + encodeURIComponent(input.value) , function(xhr) {
result.innerHTML = ' ';
var datas = xhr.responseText.toJSON();
var prop, val;
// วนลูปส่งข้อมูลมาแสดงตาม input ต่างๆ
for (prop in datas[0]) {
val = datas[0][prop];
$E(prop).value = val;
};
});
}
// กำหนด event
$G('user').addEvent('keyup', doKeyUp);
</script>
ผม save เป็นไฟล์ ajax_finder.php
และส่วนที่สอง
<?php
// สำหรับตรวจสอบในขณะกรอกข้อมูล
header("content-type: text/html; charset=UTF-8");
// กำหนดข้อมูล (ตัวอย่าง)
$users = array('demo', 'demon');
$emails = array('demo@goragod.com', 'demon@yahoo.com');
$displaynames = array('ตัวอย่าง', 'Demon !');
// ค่าที่ส่งมา
$user = trim($_POST['user']);
// ค้นหาข้อมูล
$i = 0;
while($i < count($users)){
if($users[$i] == $user){
break;
}
$i++;
}
// กำหนดค่าที่คืน
$ret[] = 'email":"'.$emails[$i];
$ret[] = 'displayname":"'.$displaynames[$i];
// คืนค่าเป็น JSON
echo '[{"'.implode('","', $ret).'"}]';
?>
ผมเซฟเป็นไฟล์ find.php
แล้ว ลอง Preview ดู ทำไมไม่ได้เหมือน ตัวอย่าง url : http://www.goragod.com/ex/ajax_finder.php
ครับ
ผมเลยสงสัยว่า ที่ทำไม่ได้เพราะว่า ผมไม่ได้ include gajx อย่างที่แนะนำ ข้างล่างครับ
โค้ดด้านล่างเป็นส่วนของฟอร์ม และ Javascript ที่ใช้สำหรับการตรวจสอบ ดูคำอธิบายต่างๆได้ที่ในโค้ดเลยครับ อย่าลืม include gajax เข้าไปในเพจด้วยนะครับ
แต่นี่คือปัญหาของผมครับ ผมจะ include gajax ยังไงครับ
รบกวนอาจารย์ช่วยชี้แนะด้วยครับ
อย่าลืม include gajax เข้าไปในเพจด้วยนะครับ
ผมได้ copy Source Code ทั้งสองส่วนมาใส่ 2 ไฟล์ คือ
ส่วน แรก :
<form>
<p>Username : <input type="text" id="user" name="user" /><span id="result"> </span></p>
<p>ลองพิมพ์คำว่า demon ลงในช่อง Username (ทีละตัว)</p>
<p>Email : <input type="text" id="email" name="email" /></p>
<p>Display Name : <input type="text" id="displayname" name="displayname" /></p>
</form>
<script type="text/javascript">
var doKeyUp = function(event){
// input เจ้าของ event (user)
var input = GEvent.element(event);
// พื้นที่แสดงผลรูปรอโหลด
var result = $E('result');
// แสดงรูปรอโหลด เพื่อบอกว่ากำลังส่งข้อมูลไปตรวจสอบ
result.innerHTML = '<img src="http://www.goragod.com/skin/img/wait.gif" alt="" />';
// ajax ส่งข้อมูลไปตรวจสอบ
var req = new GAjax();
req.send('find.php' , 'user=' + encodeURIComponent(input.value) , function(xhr) {
result.innerHTML = ' ';
var datas = xhr.responseText.toJSON();
var prop, val;
// วนลูปส่งข้อมูลมาแสดงตาม input ต่างๆ
for (prop in datas[0]) {
val = datas[0][prop];
$E(prop).value = val;
};
});
}
// กำหนด event
$G('user').addEvent('keyup', doKeyUp);
</script>
ผม save เป็นไฟล์ ajax_finder.php
และส่วนที่สอง
<?php
// สำหรับตรวจสอบในขณะกรอกข้อมูล
header("content-type: text/html; charset=UTF-8");
// กำหนดข้อมูล (ตัวอย่าง)
$users = array('demo', 'demon');
$emails = array('demo@goragod.com', 'demon@yahoo.com');
$displaynames = array('ตัวอย่าง', 'Demon !');
// ค่าที่ส่งมา
$user = trim($_POST['user']);
// ค้นหาข้อมูล
$i = 0;
while($i < count($users)){
if($users[$i] == $user){
break;
}
$i++;
}
// กำหนดค่าที่คืน
$ret[] = 'email":"'.$emails[$i];
$ret[] = 'displayname":"'.$displaynames[$i];
// คืนค่าเป็น JSON
echo '[{"'.implode('","', $ret).'"}]';
?>
ผมเซฟเป็นไฟล์ find.php
แล้ว ลอง Preview ดู ทำไมไม่ได้เหมือน ตัวอย่าง url : http://www.goragod.com/ex/ajax_finder.php
ครับ
ผมเลยสงสัยว่า ที่ทำไม่ได้เพราะว่า ผมไม่ได้ include gajx อย่างที่แนะนำ ข้างล่างครับ
โค้ดด้านล่างเป็นส่วนของฟอร์ม และ Javascript ที่ใช้สำหรับการตรวจสอบ ดูคำอธิบายต่างๆได้ที่ในโค้ดเลยครับ อย่าลืม include gajax เข้าไปในเพจด้วยนะครับ
แต่นี่คือปัญหาของผมครับ ผมจะ include gajax ยังไงครับ
รบกวนอาจารย์ช่วยชี้แนะด้วยครับ
อย่าลืม include gajax เข้าไปในเพจด้วยนะครับ
<script src="path/to/gajax.js" type="text/javascript"></script>
แทรกไว้ที่ส่วน head ของ page
ผม include อย่างที่อาจารย์แนะนำแล้วครับ แต่ก็ยังไม่ได้อีกครับ
นี่คือส่วนที่ผมแทรกลงในใน head
<script src="gajax.js" type="text/javascript"></script>
โดยผมแทรกไว้ทั้งหน้า ajax_finder.php และหน้า find.php ซึ่ง ไฟล์ gajax.js นั้นผมก็ download จากลิงค์ http://www.goragod.com/ajax/gajax.js ครับ
ทำทุกอย่างแล้ว ลอง preview เพจ ajax_finder.php แล้ว พิมพ์คำว่า demo แค่นี้ก็เห็นการเปลี่ยนแปลงคือจะโหลดรูป หมุน
แต่หลังจากนั้นก็ไม่มีอะไรเกิดขึ้น ไม่เหมือนในตัวอย่างซึ่ง พอพิมพ์คำว่า demo แล้วจะมีข้อมูล email และ displayname แสดง ครับ
ซึ่งผมอยากจะศึกษาเพื่อมาพัฒนาระบบโดยที่จะ นำข้อมูลที่อยู่ใน database ขึ้นมา แสดง เลยก่อนที่จะ submit
ยกตัวอย่างเช่น พิมพ์แค่ชื่อ user ให้แสดงข้อมูลส่วนอื่นมาแสดงบน text ฟิลด์ เลย
รบกวนอาจารย์ช่วยแนะนำด้วยครับ
ขอบคุณครับ
gajax ต้องเอาไว้ที่หน้าหลักเท่านั้น หน้าที่ถูก Ajax เรียกไม่ต้องใส่ file นี้
โค้ดที่หน้าหลัก สามารถ ดูจากตัวอย่างได้เลย ผมแนะนนำให้ทำความรู้จักกับ Javascript ก่อน จึงจะใช้งานได้
โค้ดหน้าที่ถูก Ajax เรียกไป จะมีแต่ PHP เท่านั้น
path ต่างๆ ในโค้ด ต้องอ้างให้ถูกต้อง ส่วนจะอ้างว่าอะไรนั้น ต้องดูจากที่ติดตั้งเพื่อทดสอบ โค้ดตัวอย่าง จะเป้นการอ้าง path บน Server ผม ซึ่งอาจเหมือนหรือไม่กับที่ใช้อยู่ได้
สรุป หลักๆ คือต้องทำความเข้าใจโค้ดก่อน ซึ่งผมบอกเสมอ เนื่องจากหลายๆคนพยายามหาโค้ดที่ใช้ได้เลย ซึ่งเราจะมีโอกาศเจอน้อยมากครับ ดังนั้น เราจำเป็นต้องศึกษาหาความรู้จากตัวอย่าง เพื่อที่จะสามารถดัดแปลงได้
1.เรียนรู้การใช้งาน Javascript ว่ามันมีอะไรบ้าง และต้องการอะไรบ้าง ไม่ต้องรู้ทั้งหมด แต่ถ้าจะใช้ Ajax พื้นฐานต้องมี
2. เรียนรู้เกี่ยวกับ Ajax ใช้ยังไง คืออะไร คำตอบมีบนเว็บ
3. เรียนรู้เกี่ยวกับ GAJAX อันนี้อาจเป็นโจทย์ที่ยากซักหน่อย แต่ถ้า 1,2 ได้ 3 ก็ไม่ยาก
ทั้งหมดใช้เวลาไม่เกินวัน เพราะสิ่งที่ต้องทำความเข้าใจมีไม่มากนัก
ต้องขอโทษด้วยเพราะบางทีคำถามอาจตอบตรงๆ ไม่ได้ เนื่องจาก คำตอบที่ต้องการผมได้เขียนเป็นตัวอย่างไว้ให้แล้ว เขียนอีกที ก็เขียนเหมือนตัวอย่างนั่นแหละ ส่วนข้อผิดพลาด ที่อาจเกิดขึ้นกับโค้ดที่เธอเอาไปทดลอง ผมจนใจจะตอบ เพราะไม่เห็นโค้ดทั้งหมด รวมถึง ไม่สามารถทดสอบจากเครื่องของเธอได้
เดี๋ยวผมจะลองศึกษาดู อย่างที่แนะนำครับ