ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

การเขียน ajax ต้องใช้ความรู้ในการเขียน jQuery คืออะไรมาใช้ สามารถศึกษาได้ที่ บทเรียน jQuery

jQuery.get()  หรือ $.get() ใน ajax มีข้อดีคือ สามารถแสดงข้อมูลโดยที่ไม่ต้องโหลดหน้าใหม่ ลดการ Request มาที่ Server

รูปแบบในการเขียน :

jQuery.get( url [, data ] [, success ] [, dataType ] )

 

ตัวอย่างในการใช้ jQuery.get() ใน ajax

เป็นเว็บที่แสดงค่าที่กรอกลงไปใน text คลิกปุ่ม แล้วทำการแสดงค่าบนหน้าเว็บโดยที่ไม่มีการโหลดหน้าใหม่ ตามรูป

 

โดยมีไฟล์หลักๆอยู่ 2 ไฟล์คือ

1. get-html.html  ไว้ในการส่งค่า รับค่า แสดงผล

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>


        
        
        <script type="text/javascript">
            $(document).ready(function()
            {
               $("#btn").click(function()
               {
                   $.get("ajax-get.php",    //url
                    {
                    senddata:$("#data").val()   //data
                    },
                   function(senddata)           //success
                    {
                        $("#show").html(senddata);
                    }                 
               
    
                    );          
                }); 
            });
        </script>
        
    </head>
    <body>
        <div id ="insert">
        <input type="text" id="data" name="data">
        <br>
        <input type="button" name="btn" id="btn" value="GET">        
        </div>
        <div id="show"></div>
    </body>
</html>

 

 

โครงสร้างของเว็บก็คือ มี text ในการป้อนค่า มีปุ่ม เพื่อส่งค่าที่ป้อนลงไป 

การทำงานก็คือ เราจะใส่ตัว  $.get() ไว้ในส่วนของ script โโยจะต้องมีการเรียกใช้ Jquery ในscript ก่อน

จากนั้น ทำการดักจับ Event ว่ามีการคลิกที่ปุ่มหรือไม่ ถ้ามีการคลิกที่ปุ่ม ให้ทำการเรียก url  โดยส่ง data ก็คือข้อมูลที่ป้อนใน text ไป ส่วน success นั้น ก็คือ ถ้ามีการส่งค่ากลับมา จะทำอย่างไร ในที่นี้คือ แสดงผลใน <div id="show">

 

2. ajax-get.php  สำหรับส่งค่ากลับมาแสดงผล

 

<?

php echo 'Input : '.$_GET['senddata'];

?>

 

การทำงานของไฟล์นี้ คือ เมื่อรับค่าที่มาจาก get-html.html  แล้วให้ทำการแสดงค่า โดยการ echo ค่านั้นกลับไปแสดงผลยังหน้า get-html.html

 นอกจากนี้ ถ้าต้องการ Performage ของ PHP มากยิ่งขึ้น ลองศึกษา Extension ตัวนี้ Swoole คืออะไร

คะนึงรัตน์ ลิ่มตระกูล
, การใช้ jQuery.get() ใน ajax พื้นฐาน สอน Ajax ด้วยตัวอย่าง - by บทเรียน AJAX,
0 1 0 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
4
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
30
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
22
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
21
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz
อัพเดทหรือยัง? ปรับปรุงเรื่องความปลอดภัย 9 จุด ใน Joomla 3.9.25
โดย tsukasaz พ 03 มี.ค. 2021 12:28 pm บอร์ด MindPHP News & Feedback
0
42
พ 03 มี.ค. 2021 12:28 pm โดย tsukasaz
B - เปิดหน้าเว็บด้วย template เป็น Shaper_megadeal_ii แล้ว Error 404
โดย eange08 พ 03 มี.ค. 2021 12:04 pm บอร์ด เว็บไซต์ Rnyard - Tester
2
7
พ 03 มี.ค. 2021 7:25 pm โดย tsukasaz