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

การเขียน 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 คืออะไร

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มารู้จักประเภทของเรียงความภาษาอังกฤษ
โดย Kannaphat อ 24 ม.ค. 2021 1:24 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
อ 24 ม.ค. 2021 1:24 pm โดย Kannaphat
การตัดรายการขายสินทรัพย์ที่มีค่าเสื่อม (Assets)
โดย Jiratchaya ส 23 ม.ค. 2021 11:02 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
ส 23 ม.ค. 2021 11:02 pm โดย Jiratchaya
วิธีการเขียน Essay อย่างไรให้ตอบโจทย์ผู้อ่าน
โดย Kannaphat ส 23 ม.ค. 2021 6:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
ส 23 ม.ค. 2021 6:01 pm โดย Kannaphat
python2.7 ติดปัญหา Non-ASCII character
โดย chakirin.bfds ส 23 ม.ค. 2021 12:59 pm บอร์ด Programming - C/C++ & java & Python
4
32
ส 23 ม.ค. 2021 2:40 pm โดย chakirin.bfds
ติดปัญหา find หา input ไม่เจอในไฟล์ javascript
โดย eange08 ศ 22 ม.ค. 2021 4:39 pm บอร์ด JavaScript & Jquery Ajax
1
49
ส 23 ม.ค. 2021 3:04 pm โดย eange08
โปรแกรม Kdenlive ตัดเสียงรบกวนอย่างไรคะ
โดย Kannaphat ศ 22 ม.ค. 2021 3:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
22
ศ 22 ม.ค. 2021 4:55 pm โดย Kannaphat
ขอวิธีดึงข้อมูลใน list มาแสดงเป็นข้อความทีละบรรทัด
โดย chakirin.bfds พฤ 21 ม.ค. 2021 6:38 pm บอร์ด Programming - C/C++ & java & Python
3
35
ส 23 ม.ค. 2021 1:31 pm โดย mindphp
อะไรบ้างที่คุณต้องรู้เกี่ยวกับการ ‘ซ่อมนาฬิกา’ !
โดย totheworld พฤ 21 ม.ค. 2021 3:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พฤ 21 ม.ค. 2021 3:05 pm โดย totheworld