GAJAX บทที่ 6

GForm ชื่อก็บอกว่าทำงานเกี่ยวกับฟอร์มครับ แต่เป็นการจัดการฟอร์มหรือ Submit ฟอร์มด้วย AJAX แทนครับ สามารถใช้ในการอัปโหลดได้ หรือ สามารถ Submit ฟอร์ม ในฟอร์มที่มี Editor เช่น FCKEditor ได้โดยที่ไม่ต้อง Reload หน้าครับ

submit
onsubmit
inintLoading

รูปแบบการใช้งาน

<form method="post" action="fileupload.php" onsubmit="return doAlbumUpload(this)">

<p><label for="iconupload_0">รูปภาพ :</label><input id="iconupload" size="72" type="file" name="iconupload" /></p>

<p><input type="submit" value="อัปโหลด" class="button" /><span id="save_wait">กำลังอัปโหลด...</span></p>

 </form>

สำหรับฟอร์มจะเห็นได้ว่าเป็นฟอร์มที่เขียนไปตามปกติ และ ไม่จำเป็นต้องมี encoding แต่ที่สำคัญที่สุดคือในอีเว้นต์ onsubmit ฟังก์ชั่นที่ใช้ต้องมีการ return ค่า true กลับมาเพื่อให้ฟอร์มทำการ submit เสมอ

function doAlbumUpload( pForm ) {

    var req = new GForm( pForm ); /* เรียกใช้ GForm */

    req.inintLoading( 'save_wait' , false ); /* แสดง loading ที่ตำแหน่งเดิม */

    req.submit(function( xhr ){ /* อัปโหลด */

        alert(xhr.responseText); /* รับค่าที่ส่งกลับ */

    });

    return true;

};

ในส่วนของ Javascript ครับ มีลักษณะคล้ายกับ GAJAX ครับ มีฟังก์ชั่นให้ใช้งานแค่ 3 ตัวดังตัวอย่างครับ

อ้อ ในหน้าอัปโหลดไฟล์ fileupload.php ก้เป็นการเขียนการอัปโหลดเหมือนการอัปโหลดผ่านฟอร์มตามปกติครับ

ฟังก์ชั่น onsubmit เป็นฟังก์ชั่นสำหรับจัดการเกี่ยวกับฟอร์มแบบอัตโนมัติ โดยที่เราไม่ต้องไปเขียนอีเว้นต์กำกับเหมือนในตัวอย่างด้านบนอีก เพื่อให้สามารถจัดการฟอร์มได้ง่ายขึ้นโดยการเขียนคำสั่งเพียงบรรทัดเดียว

รูปแบบการใช้งาน
new GForm(form_id[,wait_id][,center][,beforesubmit]).onsubmit(returnfunction);
form_id กำหนด id ของฟอร์มให้กับฟังก์ชั่น
wait เป็น id ของรูปรอโหลด ที่ต้องการจะแสดงเมื่อมีการกด submit (ไม่มีไม่ต้องใส่)
center สำหรับแสดงรูปรอโหลดกลางจอภาพ (true) (ไม่มีไม่ต้องใส่)
beforesubmit กำหนดฟังก์ชั่น ที่จะทำงานก่อนจะส่งไป submit (เหมือน event onsubmit ของฟอร์มตามปกติ) ถ้า return false จากฟังก์ชั่นนี้ จะไม่ไป submit (ไม่มีไม่ต้องใส่)
returnfunction กำหนดฟังก์ชั่นรับค่ากลับเมื่อ submit เรียบร้อยแล้ว โดยจะรับค่ากลับจาก object xhr ได้แก่ xhr.responseText และ xhr.responseXML (เหมือน Ajax)

ตัวอย่างการใช้งาน สำหรับฟอร์ม

<form method="post" action="fileupload.php" id="frm_test">

<p><label for="iconupload_0">รูปภาพ :</label><input id="iconupload" size="72" type="file" name="iconupload" /></p>

<p><input type="submit" value="อัปโหลด" class="button" /><span id="save_wait">กำลังอัปโหลด...</span></p>

</form>

สำหรับ Javascript ที่ใช้ควบคุมฟอร์มก็มีดังนี้

<script type="text/javascript">

/* ฟอร์ม submit เมื่อกดปุ่ม submit แสดงรูปรอโหลดกลางจอภาพ */

new GForm("frm_test","wait",true).onsubmit(doUpload);



function doUpload(xhr) { /* ฟังก์ชั่นเมื่อฟอร์ม submit เรียบร้อยแล้ว และส่งค่ากลับ */

   alert(xhr.responseText); /* รับค่าที่ส่งกลับ */

};

</script>

ในการใช้ฟังก์ชั่นนี้จะทำให้เราไม่ต้องเขียน event ที่ฟอร์ม หรือไม่ต้องไปยุ่งกับฟอร์มอีก และในหน้า fileupload.php ก็เขียนเหมือนการรับค่าจากฟอร์มปกติ