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

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

 

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

รูปแบบในการเขียน : 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

สำหรับบทเรียน php ศึกษาเพิ่มเติมได้ที่นี่ บทเรียน PHP พื้นฐาน, และการใช้ JQuery ศึกษาได้ที่ บทเรียน jQuery

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ภาษี หัก ณ ที่จ่าย บน ERP
โดย milk2533 ส 28 พ.ย. 2020 4:17 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
ส 28 พ.ย. 2020 4:17 pm โดย milk2533
ประโยชน์ของการใช้ปุ่ม Sendmail บน ERP
โดย milk2533 ส 28 พ.ย. 2020 1:40 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
ส 28 พ.ย. 2020 1:40 pm โดย milk2533
Contracts ในระบบ ERP คือ อะไร
โดย milk2533 ส 28 พ.ย. 2020 11:40 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
4
ส 28 พ.ย. 2020 11:40 am โดย milk2533
เขียน PHP กับ Array แบบนี้ ระวัง Error นะ
โดย mindphp ส 28 พ.ย. 2020 2:31 am บอร์ด Programming - PHP
0
9
ส 28 พ.ย. 2020 2:31 am โดย mindphp
โปรแกรม ERP แตกต่างจาก โปรแกรมบัญชีอย่างไร
โดย milk2533 ศ 27 พ.ย. 2020 3:05 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
19
ศ 27 พ.ย. 2020 3:05 pm โดย milk2533
ประโยชน์ ของ ERP
โดย milk2533 ศ 27 พ.ย. 2020 12:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
ศ 27 พ.ย. 2020 12:59 pm โดย milk2533
เรื่องของเคล็ดลับเก็บเงินหลักแสนสำหรับคนเรา สำคัญอย่างไร
โดย medalezga ศ 27 พ.ย. 2020 12:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ศ 27 พ.ย. 2020 12:03 pm โดย medalezga
เครื่องตรวจนับสินค้า (EOB)
โดย milk2533 ศ 27 พ.ย. 2020 11:26 am บอร์ด IOT - Internet of things
0
23
ศ 27 พ.ย. 2020 11:26 am โดย milk2533