วิธีการใช้งาน JQuery กับ Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูลว่ามมีจริงหรือไม

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

วิธีการใช้งาน JQuery กับ Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูลว่ามมีจริงหรือไม

Post by Ittichai_chupol »

การที่จะทำให้เว็บไซต์มีความสวยงานและเป็นที่น่าสนใจสำหรับการเข้ามาใช้งานนั้น จะต้องขึ้นอยู่กับความเหมาะสมกับการทำงานของเว็บไซค์นั้นว่าเป็นเว็บไซต์เกี่ยวกับอะไร และผู้ใช้งานเป็กลุ่มแบบนั้น เพื่อจะได้ตอบสนองต่อกลุ่มผู้ใช้งานได้ถูกต้อง และเพื่อที่ผู้พัฒนาจะได้วางโครงสร้างของเว็บไซต์หรือระบบได้อย่างถูกต้อง โดยการพัฒนาเว็บไซต์หรือระบบนั้นสิ่งที่จำเป้นเลยก็คือความรู้และทักษะในการใช้งานภาษาคอมพิวเตอร์ต่างๆ ทั้ง HTML PHP JAVASCRIPT มาร่วมกันทำงานเพื่อให้เว็บไซต์ที่พัฒนาขึ้นมาตอบสนองความต้องการของผู้ใช้งานได้อย่างมีประสิทธิภาพ

ดังตัวอย่างจากกนี้ หรือการพัฒนาเว็บไซต์ โดยใช้ HTML PHP JAVASCRIPT JQuery Ajax มาใช้งานร่วมกัน ก็คือ การที่ต้องการทีจะค้นหาข้อมูลโดยส่งค่าที่กรอกจากหน้าของ html แล้วทำการส่งให้ JQuery เพื่อดึงข้อมูล แล้วส่งข้อมูลที่ได้ผ่าน JQuery ไปยัง php เพื่อค้นหา แล้วส่งผลลัพธ์กลับมาแสดงที่ JQuery อีกครั้ง

มีขั้นตอนดังนี้

1. ตัวอย่างโคดที่จะทำงานในส่วนของหน้าแสดง จะเป็นส่วนที่จะให้ผู้ใช้งานกรอกชื่อ หรือ เพื่อจะทำส่งผ่าน JQuery ไปค้นหาโดย php แล้วแสดงผลลัพธ์ออกมา
** กำหนดชื่อไฟล์ว่า test_php.html (จะใช้ชื่ออื่ก็ได้)

Code: Select all

<html>
    <head>
        <title>Test php</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script> //เรียกใช้งาน library javascrit
    </head>
        <body>
      <form action="" name="frmMain" id="frmMain" method="post"> //สร้าง form
            <div>
                <label for="fname">ค้นหาชื่อ</label>
                <input type="text" name="txtName" id="txtName" placeholder="Your name..">
                <br>
                <input type="submit" value="Submit"  name="btnSend" id="btnSend">
                <!--<input type="button" name="btnSend" id="btnSend" value="Send">-->

            </div>
        </form>
</body>
</html>
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (4.82 KiB) Viewed 432 times
2.ตัวอย่าง script ที่จะเป้นส่วนรับคำสั่งการทำงาน แล้วส่งค่าที่ได้ไปไปค้นหาในส่วน php ซึ่งจะนำไปใส่ไว้บริเวณด้านล่างของ html หรือจะสร้างไฟล์แยกออกมาก็ได้

Code: Select all

<html>
<body>

--- ตัวอย่างโคดจาก ข้อ 1 ---

</body>
</html>
<script type="text/javascript">
        $(document).ready(function () {
            $("#btnSend").click(function () {  //ตรวจสอบว่ามีการกดที่ปุ่มที่มี id ว่่า btnSend หรือไม
                $.ajax({
                    type: "POST",
                    url: "test_php.php", //ไฟล์ที่ต้องการส่งค่าไป
                    data: $("#frmMain").serialize(),
                    success: function (result) {
                        alert(result.message); //ส่วนที่จะแสดงผลลัพธ์
                    }
                });

            });

        });
    </script>


3.ตัวอย๋างโคด ฝั่ง php ที่มีไว้สำหรับการรับค่า มาจาก Ajax เพื่อค้นหาข้อมูลจากฐานข้อมูล แล้วจะผลลัพธ์กลับไปแสดงที่ JQuery
กำหนดชื่อไฟล์ว่า test_php.php (จะใช้ชื่ออื่ก็ได้)

Code: Select all

<?php
header('Content-Type: application/json');  // เพื่อจะส่งค่าผลลัพธ์ที่ได้ กลับมาเป็น รูปแบบไฟล์ json

// เป็นส่วนสำหรับเชื่อมฐานข้มมูล
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "piecephpbb"; //ชื่อฐานข้อมูล
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$name = $_POST['txtName']; //รับค่า ชื่อ มาจาก Ajax

$sql = "SELECT * FROM tools_exchange_rate  WHERE name = '".$name."'";  // SQL สำหรับค้นหา ชื่อ จากตาราง  tools_exchange_rate
$query = mysqli_query($conn,$sql);
$i = 0; //กำหนดตัวแปร $i 
while($result=mysqli_fetch_array($query,MYSQLI_ASSOC))
{
  $i += 1;  // ถ้าหากมีชื่อ ที่ส่งมาอยู่ใน ตาราง  tools_exchange_rate $i จะมีค่าเป็น 1 
}
if( $i != 0){ //ถ้าหาก $i มีค่าไม่เป็น 0 แสดงว่ามีชื่ออยู่ในตาราง  tools_exchange_rate
    echo json_encode(array('status' => '1', 'message' => 'มีชื่อนี้อยู่'));  //ส่งค่ารูปแบบ   json  กลับไปหา jquery
} else { 
    echo json_encode(array('status' => '0', 'message' => 'ไม่มีชื่อนี้อยู่')); //ส่งค่ารูปแบบ   json  กลับไปหา jquery
}
$conn->close();
?>

ตัวอย่างฐานข้อมูลที่นำมาทดสอบ
Jquery & Ajax Knowledge-2.png
Jquery & Ajax Knowledge-2.png (40.55 KiB) Viewed 432 times
ผลลัพธ์ที่ได้ กรณ๊มีชื่ออยู่ตารางฐานข้อมูล
ezgif.com-video-to-gif (3).gif
ezgif.com-video-to-gif (3).gif (75.37 KiB) Viewed 432 times
ผลลัพธ์ที่ได้ กรณ๊ไม่มีชื่ออยู่ตารางฐานข้อมูล
ezgif.com-video-to-gif (4).gif
ezgif.com-video-to-gif (4).gif (82.4 KiB) Viewed 432 times
บทความศึกษาเพิ่มเติม

การใส่ค่าในช่อง input ด้วย javascript เพื่อจะได้มีค่าอยู่ใน textbox
ทำเอฟเฟค ตอนกดปุ่ม
คำสั่งจัดการฐานข้อมูล MySQL
ขอให้วันนี้เป็นวันที่ดี

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 4 guests