การส่งหลายๆค่าพร้อมกัน ด้วย Ajax

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

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

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

การส่งหลายๆค่าพร้อมกัน ด้วย Ajax

Post by abdkode » 14/03/2019 5:41 pm

การใช้งาน ajax เราส่งค่าหลายๆแถวหรือหลายฟิลด์ใน 1 ฟอร์มด้วย ajax ได้ ในที่นี้คือโดยการกดปุ่มเพื่อทำการส่งข้อมูลทีละแถวด้วย Ajax ใน 1 แถวอาจจะประกอบด้วย ช่องกรอกชื่อ นามสกุล ช่องกรอกอีเมล์ และปุ่มกดสำหรับส่งค่าในแถวนั้นๆ

วิธีการคือดเราจะแบ่งข้อมูลออกเป็นแถวและมีหมายเลขแถว อาจใช้จำนวนนับ 1 2 3 4 5 ..... ก็ได้ หรือ อาจใช้ ID ของข้อมูลก้ได้ เนื่องจาก 1 แถว คือ 1 ข้อมูลอยู่แล้ว
ใช้ ID ตามข้อ 1 กำหนดให้เป็น id ของ input แต่ละตัว รวมถึงปุ่มกดด้วย เช่น name_1, email_1,button_1 และ name_2,email_2_button_2 ....... ซึ่ง input แต่ละตัวก็จะไม่มี id ที่ซำกันเลย ในกรณีนี้ name อาจไม่มีความจำเป็นเลย
ต่อมาให้ดักจับ event onclick ที่ปุ่ม แล้วทำการส่งค่า โดยดูจาก ID ของปุ่มกด ว่าเป็น ID อะไร แล้วแทนที่ ID ของปุ่มกด ด้วย ID ของ input ในแถว ซึ่งมีเลขเดียวกัน แล้วอ่านค่า และส่งไป Ajax

ตัวอย่างโค้ดดังนี้

Code: Select all

<script>
var buttonClick = function() {
    var id = this.id.replace('button_', ''); // อ่าน ID ว่าปุ่มใดถูกกด
    var name = document.getElementById('name_' + id); // input name
    var email = document.getElementById('email_' + id); // input emai
    var q = 'id=' + id + '&name=' + encodeURIComponent(name.value) + '&email=' + encodeURIComponent(email.value);
    // เขียนคำสั่งเพื่อส่งค่า
    alert(q);
};
</script>
<p>
    <input type=text id=name_1 value=a>
    <input type=text id=email_1 value=b>
    <input type=button id=button_1 value=Send onclick="buttonClick.call(this)">
</p>
<p>
    <input type=text id=name_2 value=c>
    <input type=text id=email_2 value=d>
    <input type=button id=button_2 value=Send onclick="buttonClick.call(this)">
</p>
ตัวอย่างฟอร์มจากโค้ดด้านบน
Ajax.jpg
Ajax.jpg (5.77 KiB) Viewed 1269 times
เมื่อเรากดปุ่ม sand ก็จะส่งข้อมูลทั้งสองอินพุตไปพร้อมกัน
ดังผลลัพธ์ด้านล่าง
Ajax2.jpg
Ajax2.jpg (7.29 KiB) Viewed 1269 times
จะเห็นได้ว่าไม่ว่าเราต้องการจะส่งกี่ฟิลด์ต่อแถวก็สามารถทำได้ ดังตัวอย่างมีสองฟิลด์ เมื่อกดจะ alert เพื่อเห็นว่ามีข้อมูลอะไรที่ส่งไป และต่อไปก็ส่งให้ ajax ทำงานต่อไป

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Ajax
-ศึกษาความรู้เกี่ยวกั ฺ Bootstrap
-บทเรียน HTML
-ศึกษาความรู้เกี่ยวกั ฺCSS
-ถามตอบเกี่ยวกับ PHP
-ศึกษาความรู้เกี่ยวกับ PHP

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests