การ Submit ฟอร์ม แบบ Array ด้วย Ajax
ปัญหาการรับส่งข้อมูลด้วย Ajax ในรูปแบบ Array นี่ก็เป็นปัญหาโลกแตกอีกอันหนึ่ง ซึ่งจริงๆแล้วเราก็สามารถส่งได้ครับแต่ก็อาจจะยุ่งยากนิดนึง เนื่องจากฟังก์ชั่น Ajax ไม่ได้รองรับการใช้งาน Input แบบ Array
ปัญหานี้สามารถแก้ไขได้ง่ายๆด้วยการใช้ Ajax Framework GAjax ด้วย GForm ครับ
โค้ดตัวอย่างนี้จะมีลักษณะการส่งข้อมูลไปและกลับในรูป Array ครับ (เรียนรู้ไปพร้อมๆกันเลย) โดยเราจะทำการสร้าง Input ชื่อ text แบบ Array (text[]) จำนวนเท่าไรก็ได้ครับตามต้องการ พร้อมพื้นที่แสดงผลค่าตอบกลับ ของแต่ละ input
โค้ดมีการเรียกใช้ GAjax นะครับ สามารถดาวน์โหลดได้โดยการเรียกที่ลิงค์นั้นตรงๆได้เลยครับ ความสามารถในการ submit แบบ Array ด้วย Ajax ถูกจัดการแล้วภายใน GForm ที่เรียกใช้ครับ ซึ่งทำให้การจัดการง่ายสุดๆครับ ไม่ต้องออกแบบอะไรเพิ่มเติม
ข้อสังเกตุ ถ้า View Source ดูหลังจาก run script ด้านบน จะเห็นว่า input ทั้งหมดจะถูกกำหนด Name ให้เป็น Array ครับ คือ text[] แต่ในส่วนของพื้นที่แสดงผลค่าที่รับกลับมา จะมีค่า id ที่เป็นแบบปกติ คือ result_0 ถึง result_5 ซึ่งไม่สามารถใช้แบบ Array ไ้ด้ เนื่องจากว่า Javascript ไม่สามารถอ่าน id ในรูป Array ได้ครับ (result[]) เนื่องจากค่า id ของ Element จะถูกกำหนดให้เป็น String และค่า Name สามารถเป็น Object ได้ครับ
โค้ด php สำหรับรับค่ากลับ (form.php) ตัวอย่างนี้ไม่มีอะไรมากครับ รับค่ากลับมา แล้วก็แปลงเป็นข้อความ JSON แล้วก็ส่งกลับเลยครับ ซึ่งโดยปกติ เราสามารถรับค่าของ Input อื่นๆ(ถ้ามี) ได้เหมือน PHP ปกติ รวมถึงการอ่านค่า text ที่ส่งมาเป็น Array เหมือนปกติได้ด้วยครับ
ปัญหานี้สามารถแก้ไขได้ง่ายๆด้วยการใช้ Ajax Framework GAjax ด้วย GForm ครับ
โค้ดตัวอย่างนี้จะมีลักษณะการส่งข้อมูลไปและกลับในรูป Array ครับ (เรียนรู้ไปพร้อมๆกันเลย) โดยเราจะทำการสร้าง Input ชื่อ text แบบ Array (text[]) จำนวนเท่าไรก็ได้ครับตามต้องการ พร้อมพื้นที่แสดงผลค่าตอบกลับ ของแต่ละ input
<html>
<script type="text/javascript" src="https://www.goragod.com/ajax/gajax.js"></script>
<body>
<form id="frm_array" method="post" action="form.php">
<?php
$datas = array('One', 'Two', 'Three', 'Four', 'Five');
foreach($datas AS $i => $item){
echo '<p><input type="text" name="text[]" value="'.$item.'" /><span id="result_'.$i.'"></p>';
}
?>
<p><input type="submit" value="Send." /></p>
</form>
<script type="text/javascript">
new GForm('frm_array').onsubmit(function(xhr){
var datas = xhr.responseText.toJSON();
for (var prop in datas[0] ) {
$E(prop).innerHTML = datas[0][prop];
};
});
</script>
</body>โค้ดมีการเรียกใช้ GAjax นะครับ สามารถดาวน์โหลดได้โดยการเรียกที่ลิงค์นั้นตรงๆได้เลยครับ ความสามารถในการ submit แบบ Array ด้วย Ajax ถูกจัดการแล้วภายใน GForm ที่เรียกใช้ครับ ซึ่งทำให้การจัดการง่ายสุดๆครับ ไม่ต้องออกแบบอะไรเพิ่มเติม
ข้อสังเกตุ ถ้า View Source ดูหลังจาก run script ด้านบน จะเห็นว่า input ทั้งหมดจะถูกกำหนด Name ให้เป็น Array ครับ คือ text[] แต่ในส่วนของพื้นที่แสดงผลค่าที่รับกลับมา จะมีค่า id ที่เป็นแบบปกติ คือ result_0 ถึง result_5 ซึ่งไม่สามารถใช้แบบ Array ไ้ด้ เนื่องจากว่า Javascript ไม่สามารถอ่าน id ในรูป Array ได้ครับ (result[]) เนื่องจากค่า id ของ Element จะถูกกำหนดให้เป็น String และค่า Name สามารถเป็น Object ได้ครับ
โค้ด php สำหรับรับค่ากลับ (form.php) ตัวอย่างนี้ไม่มีอะไรมากครับ รับค่ากลับมา แล้วก็แปลงเป็นข้อความ JSON แล้วก็ส่งกลับเลยครับ ซึ่งโดยปกติ เราสามารถรับค่าของ Input อื่นๆ(ถ้ามี) ได้เหมือน PHP ปกติ รวมถึงการอ่านค่า text ที่ส่งมาเป็น Array เหมือนปกติได้ด้วยครับ
<?php
// วนลูปรับค่าที่ส่งมาแต่ละตัว
foreach($_POST[text] AS $i => $item){
$ret[] = "result_$i\":\"$item";
}
// คืนค่าเป็น JSON
echo '[{"'.implode('","', $ret).'"}]';
?>