การใช้ jQuery submit form แบบ Ajax

การ submit form แบบปกติจะมีการ refresh หน้าจอทุกครั้งที่ submit ทำให้การใช้งานดูไม่ลื่นไหล
ลองวิธีนี้ดูครับ submit form แบบ ajax ด้วย jQuery
หมดปัญหาเรื่องหน้าจอ refresh สามารถทำงานได้อย่างต่อเนื่องและดูน่าใช้มากขึ้น

 

ดาวน์โหลด jQuery

– jQuery 3.1.1 (ดาวน์โหลด)

 

ตัวอย่าง


– ถ้าระบุค่าเป็นตัวเลข จะแสดงตัวเลขที่พิมพ์
– ถ้าระบุค่าที่ไม่ใช่ตัวเลข จะแสดง alert แจ้งเตือน

 

ไฟล์ submit_numeric.php

– ทำงานกับ request ที่เป็น post  เท่านั้น
– ตรวจสอบค่า inputText ที่ส่งเข้ามาและส่งผลลัพธ์กลับไปในรูปแบบของ JSON

 

ไฟล์ numeric.html

– เมื่อผู้ใช้ระบุ inputText เข้ามาและกดปุ่ม Submit จะทำการ submit แบบ ajax ไปที่ไฟล์ submit_numeric.php
– แปลงผลลัพธ์ JSON ที่ได้ให้เป็น array
– ตรวจสอบและแสดงผลลัพธ์ โดย แสดงตัวเลขที่ผู้ใช้ระบุ ถ้าหากค่าที่ระบุไม่ใช่ตัวเลขจะแสดง alert แจ้งเตือน

 

ผลลัพธ์

– แสดงตัวเลขที่ระบุ

– ถ้าหากค่าที่ระบุไม่ใช่ตัวเลขจะแสดง alert แจ้งเตือน

One thought on “การใช้ jQuery submit form แบบ Ajax

Leave a Reply

Your email address will not be published. Required fields are marked *

Advertisment ad adsense adlogger