Php ajax ป ม submit และโชว ข อม ลเป นตาราง

– ให้เราใช้คำสั่ง jQuery Append ข้อมูลลงใน HTML โดยข้อมูลมาเป็น Array ให้ทำการวนข้อมูล โดยใส่ value คือ item.id และ name คือ item.name_th ตามบรรทัด 17

Php ajax ป ม submit และโชว ข อม ลเป นตาราง
บรรทัด 24-37 เป็นการดึงข้อมูลตำบลของอำเภอที่เราเลือกมาแสดงบน HTML โดย Event จะทำงานเมื่อคลิกเปลี่ยนอำเภอใน Dropdown การทำงานจะคล้ายกับ การเปลี่ยนจังหวัด แต่แตกต่างที่ ไฟล์ที่ดึงข้อมูลต้องเปลี่ยนเป็น get_district.php และ ตัวแปรที่ส่งไปเป็นตัวแปรของอำเภอที่ถูกเลือก และสุดท้าย ตอนได้รับข้อมูลจาก Server มาก็นำมาวนใส่ ใน Dropdown ตำบล ก็เป็นอันจบการทำงาน

7. สร้างไฟล์ get_amphure.php เพื่อดึงข้อมูล อำเภอ จากจังหวัดที่เลือกมา ดู code ตัวอย่างด้านล่าง

<?php

include('connect.php');

$sql \= "SELECT * FROM amphures WHERE province_id={$_GET['province_id']}";

$query \= mysqli_query($conn, $sql);

$json \= array();

while($result \= mysqli_fetch_assoc($query)) {

array_push($json, $result);

}

echo json_encode($json);

อธิบาย Code เมื่อ ไฟล์ script.js request ขอข้อมูลจาก server โดยเรียกใช้ไฟล์ get_amphure.php และส่งตัวแปร province_id มาด้วย เป็นตัวแปร ได้จากการเลือกจังหวัด

Php ajax ป ม submit และโชว ข อม ลเป นตาราง
บรรทัด 1 เชื่อมต่อฐานข้อมูล บรรทัด 2-3 ดึงข้อมูลเอารายการอำเภอ จากจังหวัดที่เลือก โดย where province_id บรรทัด 6-9 ดึงข้อมูลแล้วทำการ วนเก็บข้อมูลอำเภอ ไว้ใน $json ในรูปแบบ Array บรรทัด 10 ทำการแปลงข้อมูล Array ไปเป็น JSON เพิ่มเตรียมส่งกลับไปให้กลับ Client ที่เรียกใช้(script.js)

8. สร้างไฟล์ get_district.php เพื่อดึงข้อมูล ตำบล จากอำเภอที่เลือกมา ดู code ตัวอย่างด้านล่าง

<?php

include('connect.php');

$sql \= "SELECT * FROM districts WHERE amphure_id={$_GET['amphure_id']}";

$query \= mysqli_query($conn, $sql);

$json \= array();

while($result \= mysqli_fetch_assoc($query)) {

array_push($json, $result);

}

echo json_encode($json);

อธิบาย Code การทำงานคล้ายกับไฟล์ get_amphure.php แตกต่างกันในเรื่องของการดึงข้อมูลคนละตารางเท่านั้น และตัวแปรที่ใช้การ where เป็น amphure_id

ผลลัพท์

Php ajax ป ม submit และโชว ข อม ลเป นตาราง

ดาวน์โหลด

สามารถดาวน์โหลด Code เต็มๆ หรือ clone code มาดูได้ที่ลิงค์ https://github.com/ipball/multiple_dropdown

สรุป

สำหรับบทความนี้ ผู้เขียนคิดว่า หลายๆคนน่าจะเข้าใจหลักการทำงาน ของ Client – Server มองเห็นภาพการทำงานชัดเจนในทำงานของโปรแกรม ซึ่งในปี 2020 อาจจะหลายๆคนบอกว่า ยังใช้ jQuery อยู่อีกเหรอ ยังใช้ PHP อยู่อีกเหรอ?

จริงๆแล้วไม่ว่าเราจะใช้ภาษาอะไรหรือเทคโนโลยีอะไรก็ตามแต่ เราจงหาสิ่งที่เราถนัดและเหมาะสมกับงาน แต่ไม่ได้หมายความว่าจะให้ทุกคนจะต้องใช้ PHP ตลอด เราก็ควรศึกษาเรียนรู้ภาษา เทคโนโลยีใหม่ด้วย เช่นกัน เหมือนกับผู้เขียนที่ยังต้องเขียน Node.js, ExpressJS, MongoDB, Angular อยู่เลย เราเป็นนักพัฒนา เราก็ต้องศึกษาพัฒนาตัวเองอยู่สม่ำเสมอ

ผมพึ่งหัดเขียนโปรแกรมครับ ตอนนี้จะลองทำระบบเกรดของนักเรียน

ผมติดเรื่องของ AJAX Select onchange

อันนี้เป็นไฟล์ ที่คุณครูล๊อคอินมา แล้วชื่อวิชาจะถูกดึงจาก database มาใส่ไว้ใน select แล้วให้ ไฟล์ file getuser.php ทำการ ดึงข้อมูลมาโชว์ที่ select ของไฟล์แรก

ปัญหาคือ ในส่วนของ code ตรงนี้ครับ --------------- <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <? while($objResult = mysql_fetch_array($objQuery)){ ?> <option value=" <? $objResult["sub_ID"]; ?> "><?=$objResult["sub_name"];?></option> // ตรง value ที่ผม fetch มามันไม่ส่งไปที่ไฟล์ getuser.php ครับ ถ้าผมใส่ ตัวเลข ล่ะส่งได่ เช่น "30" แบบนี้ได้ ครับ <? } ?> </select> </form> --------------- [Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้

[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้