GORAGOD.com
freelance, web developer, web designer, hosting, domain name
Home
Host & Domain
Portfolio
ช่วยสอนเรื่อง ajax หน่อยครับ
Home
Forum
ช่วยสอนเรื่อง ajax หน่อยครับ
cpe2208@gmail.com
ผมต้องการทำหน้าเวป เป็นประมาณตามรูปที่แนบไว้
คือเมื่อเราคลิกที่กล่องสีน้ำเงิน หรือ ตัวอักษร ที่อยู่ในกล่องนั้น แล้วต้องการให้มี ข้อความหรือ อาจะเปน radiobox ออกมาข้างล่าง
ที่เป็นส่วนของ สีฟ้า โดยการใช้ ajax ผมต้องทำอย่างไบ้างครับ
แบบว่าผมมือใหม่เลย ยังเขียนไม่ค่อยเป็นครับ
ขอบมากคุณครับ
goragod
ต้องการให้สอน หรือให้เขียนโค้ดให้ครับ...
ถ้าต้องการให้สอน ลองอ่านบทความ เกี่ยวกับ Ajax บนเว็บดีกว่ามั้ยครับ ถ้าอ่านแล้ว ติด หรือไม่ค่อยเข้าใจตรงไหน ค่อยถามมาเป็นข้อๆ
ถ้าต้องการให้เขียนโค้ดให้ คงต้องรอคนใจบุญมาเขียนให้แล้วครับ โดยส่วนตัวผมไม่นิยมเขียนโค้ดให้ครับ โดยเฉพาะ "มือใหม่" ผมอยากให้อ่านบทความ แล้วทำตามที่บทความเขียนไว้ก่อนดีกว่าครับ ผมว่าถ้าได้อ่านบทความผมก่อน ความต้องการข้างบน จะไม่เกินความสามารถครับ
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 ไรประมาณดีครับ
ขอบคุณครับ
yoojuy
ก็ทำได้เลยครับ
แบบเดิมเลย แต่ขึ้นอยู่กับว่าเราจะต้องการแสดงส่วนไหน ก็นำ
<div>
</div>
ไปวางได้เลยครับ
แต่ถ้าต้องการให้หายไป ก็นำ
<div>
คลุมส่วนที่แสดงไว้ตอนแรกครับ
</div>
ลองศึกษาการส่งค่าไปมาบ่อยๆครับ
ถ้าไม่ได้ยังไงก็โพสมานะครับ จะลองส่งตัวอย่างไปให้ดูนะครับ
goragod
ศึกษา Javascript เพิ่มเติม ดีมั้ยครับ หลายๆอย่างที่ต้องการ ใช้แค่ Javascript เท่านั้น ครับ
cpe2208@gmail.com
คือผมมีปัญหาที่ว่า จะกดปุ่มซึ่งปุ่มนี้อยู่คนละไฟล์กับ
<div>
</div>
ที่เราอยากให้มันแสดงอะครับ
เล่นปุ่มอยู่และคำสั่งอยู่ที่ไฟล์ test1.php แต่เราอยากสั่งให้ข้อความไปแสดงบน
<div>
</div>
ของไฟล์ test2.php ครับ
มันต้องทำยังไง ผมทำยังไงก้ไม่ได้ซักทีครับ
goragod
คนละไฟล์ แต่ include มาแสดงหน้าเียวกัน หรือ คนละหน้าเว็บเลยครับ เอาให้ชัด
ถ้ากรณีที่ 2 คงทำยากครับ และ คำถาม ควรจะชัดเจนกว่านี้ครับ
cpe2208@gmail.com
คนละไฟล์ครับ แต่ดึงมาแสดงบนหน้าเดียวกัน
คือทั้งปุ่มและทั้งหน้าที่แสดง นั้นอยู่ในหน้าเดียวกัน เหมือนรูปข้างบนเลยครับ
ส่วนของปุ่มนั้นอยู่ด้านล่างสีฟ้า ซึ่งต้องคลิกจากข้างบนถึงจะแสดงออกมา จากนั้นเมื่อไปคลิกปุ่มด้านล่าง ก็จะให้แสดงข้อความบน
<div>
</div>
ข้างบนซึ่งมันอยู่คนละไฟล์กันครับ
goragod
http://www.goragod.com/...html?q=createElement
ความคิดเห็น
รายละเอียด
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^
ถ้าต้องการให้สอน ลองอ่านบทความ เกี่ยวกับ 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> ข้างบนซึ่งมันอยู่คนละไฟล์กันครับ