ส่งแบบฟอร์มด้วยวิธีการโพสต์กับ AJAX และ jQuery

ใน บทความก่อนหน้านี้ เราได้เห็นวิธีการส่งแบบฟอร์มกับ AJAX ในการส่งอีเมล์ด้วย ASP หรือ PHP, ใช้ง่าย ห้องสมุด JavaScript ใช้สำหรับตัวอย่างของคู่มือการ AJAX comfortpianostudio.com ที่เช่นเดียวกับรายการอื่น ๆ อีกมากมาย

ห้องสมุดในคำถามที่เร็วมากและมีน้ำหนักเบาจะใช้วิธี GET สำหรับการส่งข้อมูล แต่เมื่อคุณส่งแบบฟอร์มในกรณีที่ใช้วิธี POST เหตุผลง่ายๆที่ : สำหรับสตริงการสืบค้น (พารามิเตอร์ที่ส่งผ่านไปใน URL ที่ ผ่านวิธี GET) ที่มีขีด จำกัด ของ 255 ตัวอักษรรวมถึงช่องว่างในขณะที่วิธี POST จะไม่ทุกข์ทรมานจากข้อ จำกัด นี้

เพื่อที่จะกลับมาห้องสมุดความสะดวกสบายมาก jQuery ซึ่งมีความสะดวกสบายในการทำงานกับฟังก์ชั่น AJAX

ลองมาเป็นตัวอย่างง่ายๆของการส่งข้อมูลในการโพสต์ด้วย AJAX ทั้งโดยเรียกพวกเขาผ่านทาง PHP ASP, ในขณะที่สคริปต์ฝั่งเซิร์ฟเวอร์ก็จะพิมพ์ข้อมูลหน้าจอส่ง : ให้ผู้อ่านงานด้านการจัดการพวกเขาตามความต้องการของคุณ

จำครั้งแรกที่ส่วนหัวของ jquery.js ห้องสมุดของหน้าเว็บของเรา :

 



 <script type="text/javascript" src="jquery.js"> </ script>

 

เราสร้างรูปแบบ HTML :

 name="modulo"> <form



    



 ชื่อ <p> </ p>



    



 <p> <input type="text" name="nome" id="nome=> </ p>



    



 นามสกุล <p> </ p>



    



 <p> <input type="text" name="cognome" id="cognome"> </ p>



    



 <input type="button" id="bottone" value="Invia dati">







 </ form>









 <div id="risultato"> </ div>

รูปแบบง่ายๆที่ประกอบด้วยสองเขตข้อมูลที่ปุ่มและหน้าจอที่พิมพ์อยู่บนชั้นซึ่งเป็นผลของการดำเนินการ

ให้เราตอนนี้การวิเคราะห์รหัส Javascript :

 <script type="text/javascript">







 $ (เอกสาร). พร้อม (ฟังก์ชัน () {



  



 $ ("ปุ่ม #"). คลิกที่ (function () {



    



 var name = $ ("# ชื่อ") Val ().;



    



 var name = $ ("# ชื่อ") Val ().;



    



 $. Ajax ({



      



 ประเภท :"POST",



      



 URL :"dati.ext"



      



 datatype :"HTML",



      



 ประสบความสำเร็จ : ฟังก์ชัน (MSG)



      



 {



        



 . $ ("Result #") HTML (msg);



      



 }



      



 ข้อผิดพลาด : ฟังก์ชัน ()



      



 {



        



 alert ("เรียกล้มเหลวโปรดลองอีกครั้ง ...");



      



 }



    



 });



  



 });







 });







 </ script>

เรากู้ผ่านวิธีการ Ajax, ลักษณะของการส่งผ่าน : วิธีการ (POST), URL ของฝั่งเซิร์ฟเวอร์ที่จะจัดการกับข้อมูลที่ (*) แล้วระบุว่าค่าตอบแทนจะอยู่ในรูปแบบ HTML และในที่สุดก็พิมพ์ไปยังวิดีโอ ข้อความยืนยันหรือข้อผิดพลาดในการเรียกใด ๆ

โปรดทราบว่า jQuery นอกจากนี้ยังมีทางลัดที่น่าสนใจในการจัดการสาย Ajax กับวิธี POST :

 <script type="text/javascript">







 $ (เอกสาร). พร้อม (ฟังก์ชัน () {



  



 $ ("ปุ่ม #"). คลิกที่ (function () {



    



 var name = $ ("# ชื่อ") Val ().;



    



 var name = $ ("# ชื่อ") Val ().;



    



 โพสต์ ("dati.ext", $ {ชื่อ : ชื่อนามสกุล : นามสกุล}.., ฟังก์ชั่น (msg) {$ ("ผล #") HTML (msg );});

ที่วิธีการโพสต์ () เราได้ผ่านในการสั่งซื้อ URL ของสคริปต์ฝั่งเซิร์ฟเวอร์ที่จะได้รับและประมวลผลการร้องขอข้อมูลที่ดึงมาจากรูปแบบและฟังก์ชันการเรียกกลับที่จะพิมพ์ออก

• <<
• 1
• 2
• >>