ช่วยสอนเรื่อง ajax หน่อยครับ HomeForumช่วยสอนเรื่อง ajax หน่อยครับ cpe2208@gmail.com ผมต้องการทำหน้าเวป เป็นประมาณตามรูปที่แนบไว้ คือเมื่อเราคลิกที่กล่องสีน้ำเงิน หรือ ตัวอักษร ที่อยู่ในกล่องนั้น แล้วต้องการให้มี ข้อความหรือ อาจะเปน radiobox ออกมาข้างล่าง ที่เป็นส่วนของ สีฟ้า โดยการใช้ ajax ผมต้องทำอย่างไบ้างครับ แบบว่าผมมือใหม่เลย ยังเขียนไม่ค่อยเป็นครับ ขอบมากคุณครับ กรกฎ วิริยะ ต้องการให้สอน หรือให้เขียนโค้ดให้ครับ... ถ้าต้องการให้สอน ลองอ่านบทความ เกี่ยวกับ Ajax บนเว็บดีกว่ามั้ยครับ ถ้าอ่านแล้ว ติด หรือไม่ค่อยเข้าใจตรงไหน ค่อยถามมาเป็นข้อๆ ถ้าต้องการให้เขียนโค้ดให้ คงต้องรอคนใจบุญมาเขียนให้แล้วครับ โดยส่วนตัวผมไม่นิยมเขียนโค้ดให้ครับ โดยเฉพาะ "มือใหม่" ผมอยากให้อ่านบทความ แล้วทำตามที่บทความเขียนไว้ก่อนดีกว่าครับ ผมว่าถ้าได้อ่านบทความผมก่อน ความต้องการข้างบน จะไม่เกินความสามารถครับ Wanchana yoojuy ยังไงก็ต้องค่อยๆศึกษาไปก่อนนะครับ ก็พยายามลองส่งค่าไปๆมาๆบ่อยๆ แล้วก็อ่านในบทความที่มีอยู่มากๆครับ ส่วน Code ด้่านล่างเป็นตัวอย่างนิดหน่อยครับ ลองปรับเปลี่ยนดูครับ แต่ผมไม่ได้ทำำเป็นรูปภาพทำเป็นปุ่ม แทนครับ ลองทดสอบดูครับ หน้า ส่วน Html และ Javascript ตั้งชื่อว่า test.php <!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>Untitled Document</title> <script type="text/javascript"> function uzXmlHttp(){ var xmlhttp = false; try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ xmlhttp = false; } } if(!xmlhttp && document.createElement){ xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function show_radio_box() { var url = 'show.php'; xmlhttp=uzXmlHttp(); xmlhttp.onreadystatechange = function () { //document.getElementById("loading").innerHTML="<img src='images/general/loading.gif'>";//Show image ajax if (xmlhttp.readyState==4){ if (xmlhttp.status==200) { //document.getElementById("loading").innerHTML=""; var ret=xmlhttp.responseText; document.getElementById("show").innerHTML=ret; } } } xmlhttp.open("GET", url); xmlhttp.setRequestHeader("If-Modified-Since", ""+ new Date().getTime()+""); xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=windows-874'); xmlhttp.send(null); } </script> </head> <body> <input type="submit" name="button" id="button" value="ตัวอย่าง" onclick="show_radio_box();" /> <div id="show"></div> </body> </html> 2. หน้า Ajax ตั้งชื่อ show.php เก็บ Path ไว้ที่เดียวกันนะครับ <? $now = gmdate('D,d M Y H:i:s') . ' GMT'; header('Expires: ' . $now); header('Last-Modified: ' . $now); header('Cache-Control: no-store, no-cache, must-revalidate'); header('Cache-Control: pre-check=0, post-check=0, max-age=0'); header('Pragma: no-cache'); header('Content-Type: text/html; charset=utf-8'); ?><input name="" type="checkbox" value="" /> โชว์แล้วจ้า cpe2208@gmail.com ขอบคุณครับ cpe2208@gmail.com ตอนนี้ถ้าผมอยากทำให้ ทั้งสองเฟรมนั้น สามารถคลิกแล้วทำการโต้ตอบ เปลี่ยนแปลงค่าต่างๆ ของแต่ละเฟรมได้ ต้องทำยังไงครับ อย่างเช่น ถ้าคลิกข้างบนแล้วข้างล่างก้พิมอะไรออกมาเช่น hello แล้วพอคลิกที่ข้างล่างอีกที ข้างบนก้จะพิม hi ไรประมาณดีครับ ขอบคุณครับ Wanchana yoojuy ก็ทำได้เลยครับ แบบเดิมเลย แต่ขึ้นอยู่กับว่าเราจะต้องการแสดงส่วนไหน ก็นำ <div></div> ไปวางได้เลยครับ แต่ถ้าต้องการให้หายไป ก็นำ <div>คลุมส่วนที่แสดงไว้ตอนแรกครับ </div> ลองศึกษาการส่งค่าไปมาบ่อยๆครับ ถ้าไม่ได้ยังไงก็โพสมานะครับ จะลองส่งตัวอย่างไปให้ดูนะครับ กรกฎ วิริยะ ศึกษา Javascript เพิ่มเติม ดีมั้ยครับ หลายๆอย่างที่ต้องการ ใช้แค่ Javascript เท่านั้น ครับ cpe2208@gmail.com คือผมมีปัญหาที่ว่า จะกดปุ่มซึ่งปุ่มนี้อยู่คนละไฟล์กับ <div> </div>ที่เราอยากให้มันแสดงอะครับ เล่นปุ่มอยู่และคำสั่งอยู่ที่ไฟล์ test1.php แต่เราอยากสั่งให้ข้อความไปแสดงบน <div> </div> ของไฟล์ test2.php ครับ มันต้องทำยังไง ผมทำยังไงก้ไม่ได้ซักทีครับ กรกฎ วิริยะ คนละไฟล์ แต่ include มาแสดงหน้าเียวกัน หรือ คนละหน้าเว็บเลยครับ เอาให้ชัด ถ้ากรณีที่ 2 คงทำยากครับ และ คำถาม ควรจะชัดเจนกว่านี้ครับ cpe2208@gmail.com คนละไฟล์ครับ แต่ดึงมาแสดงบนหน้าเดียวกัน คือทั้งปุ่มและทั้งหน้าที่แสดง นั้นอยู่ในหน้าเดียวกัน เหมือนรูปข้างบนเลยครับ ส่วนของปุ่มนั้นอยู่ด้านล่างสีฟ้า ซึ่งต้องคลิกจากข้างบนถึงจะแสดงออกมา จากนั้นเมื่อไปคลิกปุ่มด้านล่าง ก็จะให้แสดงข้อความบน <div> </div> ข้างบนซึ่งมันอยู่คนละไฟล์กันครับ กรกฎ วิริยะ http://www.goragod.com/...html?q=createElement ความคิดเห็น รายละเอียด ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M ส่งความคิดเห็น
ถ้าต้องการให้สอน ลองอ่านบทความ เกี่ยวกับ Ajax บนเว็บดีกว่ามั้ยครับ ถ้าอ่านแล้ว ติด หรือไม่ค่อยเข้าใจตรงไหน ค่อยถามมาเป็นข้อๆ
ถ้าต้องการให้เขียนโค้ดให้ คงต้องรอคนใจบุญมาเขียนให้แล้วครับ โดยส่วนตัวผมไม่นิยมเขียนโค้ดให้ครับ โดยเฉพาะ "มือใหม่" ผมอยากให้อ่านบทความ แล้วทำตามที่บทความเขียนไว้ก่อนดีกว่าครับ ผมว่าถ้าได้อ่านบทความผมก่อน ความต้องการข้างบน จะไม่เกินความสามารถครับ
ยังไงก็ต้องค่อยๆศึกษาไปก่อนนะครับ
ก็พยายามลองส่งค่าไปๆมาๆบ่อยๆ แล้วก็อ่านในบทความที่มีอยู่มากๆครับ ส่วน Code ด้่านล่างเป็นตัวอย่างนิดหน่อยครับ ลองปรับเปลี่ยนดูครับ แต่ผมไม่ได้ทำำเป็นรูปภาพทำเป็นปุ่ม แทนครับ ลองทดสอบดูครับ
หน้า ส่วน Html และ Javascript ตั้งชื่อว่า test.php
<!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>Untitled Document</title>
<script type="text/javascript">
function uzXmlHttp(){
var xmlhttp = false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}
if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function show_radio_box()
{
var url = 'show.php';
xmlhttp=uzXmlHttp();
xmlhttp.onreadystatechange = function () {
//document.getElementById("loading").innerHTML="<img src='images/general/loading.gif'>";//Show image ajax
if (xmlhttp.readyState==4){
if (xmlhttp.status==200) {
//document.getElementById("loading").innerHTML="";
var ret=xmlhttp.responseText;
document.getElementById("show").innerHTML=ret;
}
}
}
xmlhttp.open("GET", url);
xmlhttp.setRequestHeader("If-Modified-Since", ""+ new Date().getTime()+"");
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=windows-874');
xmlhttp.send(null);
}
</script>
</head>
<body>
<input type="submit" name="button" id="button" value="ตัวอย่าง" onclick="show_radio_box();" />
<div id="show"></div>
</body>
</html>
2. หน้า Ajax ตั้งชื่อ show.php เก็บ Path ไว้ที่เดียวกันนะครับ
<?
$now = gmdate('D,d M Y H:i:s') . ' GMT';
header('Expires: ' . $now);
header('Last-Modified: ' . $now);
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Cache-Control: pre-check=0, post-check=0, max-age=0');
header('Pragma: no-cache');
header('Content-Type: text/html; charset=utf-8');
?><input name="" type="checkbox" value="" />
โชว์แล้วจ้า
อย่างเช่น ถ้าคลิกข้างบนแล้วข้างล่างก้พิมอะไรออกมาเช่น hello แล้วพอคลิกที่ข้างล่างอีกที ข้างบนก้จะพิม hi ไรประมาณดีครับ
ขอบคุณครับ
ก็ทำได้เลยครับ
แบบเดิมเลย แต่ขึ้นอยู่กับว่าเราจะต้องการแสดงส่วนไหน ก็นำ <div></div> ไปวางได้เลยครับ
แต่ถ้าต้องการให้หายไป ก็นำ <div>คลุมส่วนที่แสดงไว้ตอนแรกครับ </div>
ลองศึกษาการส่งค่าไปมาบ่อยๆครับ
ถ้าไม่ได้ยังไงก็โพสมานะครับ จะลองส่งตัวอย่างไปให้ดูนะครับ
เล่นปุ่มอยู่และคำสั่งอยู่ที่ไฟล์ test1.php แต่เราอยากสั่งให้ข้อความไปแสดงบน <div> </div> ของไฟล์ test2.php ครับ
มันต้องทำยังไง ผมทำยังไงก้ไม่ได้ซักทีครับ
ถ้ากรณีที่ 2 คงทำยากครับ และ คำถาม ควรจะชัดเจนกว่านี้ครับ
คือทั้งปุ่มและทั้งหน้าที่แสดง นั้นอยู่ในหน้าเดียวกัน เหมือนรูปข้างบนเลยครับ
ส่วนของปุ่มนั้นอยู่ด้านล่างสีฟ้า ซึ่งต้องคลิกจากข้างบนถึงจะแสดงออกมา จากนั้นเมื่อไปคลิกปุ่มด้านล่าง ก็จะให้แสดงข้อความบน
<div> </div> ข้างบนซึ่งมันอยู่คนละไฟล์กันครับ