A-AA+then

ช่วยสอนเรื่อง ajax หน่อยครับ

953
ช่วยสอนเรื่อง ajax หน่อยครับ
ผมต้องการทำหน้าเวป เป็นประมาณตามรูปที่แนบไว้

คือเมื่อเราคลิกที่กล่องสีน้ำเงิน หรือ ตัวอักษร ที่อยู่ในกล่องนั้น  แล้วต้องการให้มี ข้อความหรือ อาจะเปน radiobox ออกมาข้างล่าง
ที่เป็นส่วนของ สีฟ้า โดยการใช้ ajax ผมต้องทำอย่างไบ้างครับ 

แบบว่าผมมือใหม่เลย ยังเขียนไม่ค่อยเป็นครับ

ขอบมากคุณครับ

10 ความคิดเห็น

ต้องการให้สอน หรือให้เขียนโค้ดให้ครับ...

ถ้าต้องการให้สอน ลองอ่านบทความ เกี่ยวกับ Ajax บนเว็บดีกว่ามั้ยครับ ถ้าอ่านแล้ว ติด หรือไม่ค่อยเข้าใจตรงไหน ค่อยถามมาเป็นข้อๆ

ถ้าต้องการให้เขียนโค้ดให้ คงต้องรอคนใจบุญมาเขียนให้แล้วครับ โดยส่วนตัวผมไม่นิยมเขียนโค้ดให้ครับ โดยเฉพาะ "มือใหม่" ผมอยากให้อ่านบทความ แล้วทำตามที่บทความเขียนไว้ก่อนดีกว่าครับ ผมว่าถ้าได้อ่านบทความผมก่อน ความต้องการข้างบน จะไม่เกินความสามารถครับ
1

    ยังไงก็ต้องค่อยๆศึกษาไปก่อนนะครับ
    
    ก็พยายามลองส่งค่าไปๆมาๆบ่อยๆ แล้วก็อ่านในบทความที่มีอยู่มากๆครับ ส่วน 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="" />
    
        โชว์แล้วจ้า
    
         
2

ขอบคุณครับ
3

ตอนนี้ถ้าผมอยากทำให้ ทั้งสองเฟรมนั้น สามารถคลิกแล้วทำการโต้ตอบ เปลี่ยนแปลงค่าต่างๆ ของแต่ละเฟรมได้ ต้องทำยังไงครับ

อย่างเช่น ถ้าคลิกข้างบนแล้วข้างล่างก้พิมอะไรออกมาเช่น hello แล้วพอคลิกที่ข้างล่างอีกที ข้างบนก้จะพิม hi ไรประมาณดีครับ
ขอบคุณครับ
4

    ก็ทำได้เลยครับ
    
    แบบเดิมเลย แต่ขึ้นอยู่กับว่าเราจะต้องการแสดงส่วนไหน ก็นำ <div></div> ไปวางได้เลยครับ
    
    แต่ถ้าต้องการให้หายไป ก็นำ <div>คลุมส่วนที่แสดงไว้ตอนแรกครับ </div>
    
    ลองศึกษาการส่งค่าไปมาบ่อยๆครับ
    
    ถ้าไม่ได้ยังไงก็โพสมานะครับ จะลองส่งตัวอย่างไปให้ดูนะครับ

    
     
5

ศึกษา Javascript เพิ่มเติม ดีมั้ยครับ หลายๆอย่างที่ต้องการ ใช้แค่ Javascript เท่านั้น ครับ
6

คือผมมีปัญหาที่ว่า จะกดปุ่มซึ่งปุ่มนี้อยู่คนละไฟล์กับ <div> </div>ที่เราอยากให้มันแสดงอะครับ
เล่นปุ่มอยู่และคำสั่งอยู่ที่ไฟล์ test1.php  แต่เราอยากสั่งให้ข้อความไปแสดงบน <div> </div> ของไฟล์ test2.php ครับ
มันต้องทำยังไง ผมทำยังไงก้ไม่ได้ซักทีครับ
7

คนละไฟล์ แต่ include มาแสดงหน้าเียวกัน หรือ คนละหน้าเว็บเลยครับ เอาให้ชัด

ถ้ากรณีที่ 2 คงทำยากครับ และ คำถาม ควรจะชัดเจนกว่านี้ครับ
8

คนละไฟล์ครับ  แต่ดึงมาแสดงบนหน้าเดียวกัน

คือทั้งปุ่มและทั้งหน้าที่แสดง นั้นอยู่ในหน้าเดียวกัน เหมือนรูปข้างบนเลยครับ
ส่วนของปุ่มนั้นอยู่ด้านล่างสีฟ้า ซึ่งต้องคลิกจากข้างบนถึงจะแสดงออกมา  จากนั้นเมื่อไปคลิกปุ่มด้านล่าง ก็จะให้แสดงข้อความบน 
<div>  </div> ข้างบนซึ่งมันอยู่คนละไฟล์กันครับ
9

10
^