ต่อกันด้วยเรื่อง ajax กับการ submit form
เอาล่ะหลังจากทิ้งช่วงอัพเดทไปพักนึง (คนมันงานยุ่งนี่หว่า -*-) วันนี้เรามา advanced แต่ทำง่ายๆ กันด้วยเรื่องของ ajax กับการ submit form หลังอ่านจบคุณจะคิดว่า เทคดนโลยี ajax อะไรเนี่ยมันก็แค่ของเด็กเล่นกันเลย อู้วว์ เรื่องจริง !
คัว jQuery นั้นถ้าใครขยันไปอ่าน manual หรือ api มันบ้างจะเห็นว่ามันสามารถทำงานกับ ajax ได้หลายกรณีด้วยกันทั้งคำสั่ง $.get หรือ $.post ที่เขียนง่ายๆบรรทัดเดียว หรือพวกที่ต้องการข้อมูลเฉพาะๆก็ใช้ $.getJSON, $.getScript ก็ว่ากันไป แต่วันนี้ที่ผมจะมาแนะนำคือคำสั่ง $.ajax ที่สามารถปรับแต่งได้ดีกว่า
วันนี้เราจะลองมาใช้คำสั่งนี้เพื่อ submit form กันดู สมมุตว่าผมมี html ดังนี้นะครับ
ผมต้องการที่จะส่งค่านี้ไป save ยัง target.php โดยไม่ต้องการ post ไปยัง page ใหม่ผมสามารถใช้ jQuery เขียนเพื่อทำการ submit ฟอร์มพร้อมทั้งส่ง input ไปได้ครบด้วยคำสั่งแบบนี้
เท่านี้การทำงานก็จะสมบูรณ์แล้ว ง่ายโครตเลยใช่มั้ยครับ นอกเหนือจาก parameters เหล่านี้แล้วคำสั่งนี้ยังมี params อื่นๆ อีกซึ่งลองอ่านได้จาก doc ของ jQuery ได้เลย เช่น
async (ปิดเปิดการ synchronous ***ไม่ควรจะไปแก้มันถ้าจะใช้ ajax default เป็น true)
beforeSend (ก่อนการ execute)
complete (หลังจาก script ถูก execute จนจบ)
contentType (ตั้ง content-type ส่งไป)
ifModified (ต้อง set last-modified ที่ server side script)
timeout (กำหนด timeout)
จบแล้วครับ บทความวันนี้ผมไม่ขอเขียนตัวอย่างนะครับเพราะบทนี้ไม่น่าจะยากเท่าไหร่ ถ้าอยากจะศึกษาเพิ่มเติมผมว่าไปที่เวบ jQuery.com ได้เลย
http://docs.jquery.com/Ajax/jQuery.ajax#options
สวัสดี สวีดัด ^_^
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
code error ส่วนนี้
$(document).ready(function() {
จริงๆ ไม่น่าจะ error ได้นะครับ ลองตรวจสอบดูว่ามีการ include jQuery เข้ามารึยัง
ผมลองแล้วครับ
เหมือนว่าคุณจะลืมใส่ data:params, นะครับ
ไม่งั้นข้อมูลที่กรอกใน input มันไม่ถูกส่งไปด้วยครับ
ขอบคุณมากๆครับสำหรับความรู้ดีๆ (ผมติด jQuery งอมแงมเลย)
แหะๆ ลืมจริงๆด้วยครับ ^^
ขอบคุณมากครับ พอดีเขียนสดๆยังไม่ได้เทสเลยมีปัญหา T_T
ผมอยากให้มันออกที div แทนเขียนไงอะคับ มะอยากได้ alert แล้ว ขึ้น loadong… เพิ่มตรงไหนนะคับ
success: function(data) { // ถ้าทำเสร็จจะได้ค่าคืนมา (กรณีมี)
#(”#divid”).html(data);
}
วิธีนี้รับค่าจาก input ประเภทไฟล์ไม่ได้อะครับ คือ ผมจะให้รับค่าที่เป็นข้อมูลด้วย และอัพโหลดไฟล์ด้วย ผ่านหน้าเว็บ โดยใช้ jquery ช่วย ปรากฏว่าใช้ serialize ฟอร์ม แล้วมันไม่ส่งค่าตัวแปรที่เป็น file มาด้วย ครับ ใครมีวิธีอื่น หรือมีวิธีที่รับค่า input แบบไฟล์ ร่วมกับข้อมูล ช่วยผมหน่อยครับ ๆ ๆ
input ประเ๓ทไฟล์ไม่ได้อยู่แล้วครับ เพราะมันต้องส่ง header ของ file ไปด้วย แต่ว่ามี plugin การอัพโหลดประเภทนี้เยอะครับ ลองใช้ google หาเอา เช่นคำว่า jQuery+ajax+upload
ส่วนมากจะเป็นการสร้าง iframe ขึ้นมาก่อน แต่ถ้าเราไม่ Generate Source ดูก็จะไม่เห็น เนียนมากครับ
อยากทราบว่าถ้าส่งค่าภาษาไทยไปแล้ว ข้อมูลที่ส่งไปกลายเป็นภาษาที่อ่านไม่ออก แต่ไม่ได้เป็น ??? จะทำอย่างไรครับ ขอบคุณครับ
Save as page นั้นเป็น utf-8 ครับ