การส่งข้อมูลแบบ
Ajax นั้นย่อมากจาก Asynchronous JavaScript And XML เป็นเหมือนกับการส่งข้อมูลและการรับข้อมูลจากหน้าเว็บ เพื่อมาใช้งานต่อที่หลังบ้าน หรือว่าจะส่งข้อมูลจากหน้าบ้านเพื่อนำมาใช่ต่อที่หน้าบ้านก็ได้ ซึ่งในกระทู้นี้จะสอนการส่งข้อมูลจากหลังบ้านที่เป็น
Flask Python มาเพื่อนำมาใช้งานกับหน้าเว็บที่เป็น Javascript
โดยเราจะต้องเริ่มจากการเรียกใช้งานจาก
Javascript ไปยังหน้า Python เพื่อทำงานและ Return ค่ากลับมา
การส่งไฟร์มายังเว็บหน้าบ้านนั้นเราจะใช้งานภาษา Javascript เพื่อเรียกใช้งานโดยเราจะต้องมีการเปิดที่หัว <head> ก่อนว่าเราต้องการใช้ Jqurry Ajax ด้วยโค้ด
ซึ่งไฟร์มีชื่อว่า index.html
โค้ด: เลือกทั้งหมด
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
จากนั้นเราจะเราจะต้องสร้างตัวของ div ขึ้นมาเพื่อให้แสดงค่าที่เรารับมาด้วยโค้ดที่ส่วนของ Body
จากนั้นให้เราเปิดแท็ค script ขึ้นมาแล้วให้เราไปเรียกใช้งานฟังก์ชั่นที่ PythonFlaskด้วยโค้ด
โค้ด: เลือกทั้งหมด
$.get('/url', function(data) {
let player = document.getElementById('output')
player.append(data)}
ตรงที่เป็นนั้นเราจะต้องกำหนด url ให้ตรงกับ url ของ Flask Python ที่เราต้องการที่จะให้ทำงานแล้วส่งค่าคืนกลับมา
จากนั้นก็จะเป็นโค้ดในส่วนของ Python
โค้ด: เลือกทั้งหมด
from flask import Flask,render_template
app=Flask(__name__)
app.config['SECRET_KEY']='secret_key'
@app.route('/')
def index():
return render_template('index.html')
@app.route('/URL')
def URL():
x="นาย A"
return x
จากโค้ดจะเห็นได้ว่าเราจะต้องทำการเปิดแท็ค Flask ขึ้นมาเสียก่อนจากนั้นให้เราทำการ rount ไปที่ / ก่อนแล้วให้ render ไปที่หน้า index.html ก่อนจากนั้นพอไปที่หน้า index.html จากนั้นก็จะเจอโค้ดที่จะมีคำสั่ง Get ซึ่งจะกลับมารันโค้ดในส่วนของ route URL ซึ่งก็จะ return ค่า นาย A กลับมาที่หน้า index.html จากนั้นก็จะเป็นโค้ด สร้างตัวแปร สำหรับเก็บข้อมูล ID ของ Element output ที่เราสร้างเอาไว้ จากนั้นจะให้ทำการแสดงข้อมูลของ data ที่เก็บข้อมูล นาย A เอาไว้ออกหน้าจอดังภาพ
- ผลลัพธ์ทางหน้าเว็บ
- ผลลัพธ์ทางหน้าเว็บ.PNG (746 ไบต์) Viewed 339 times
และนั้นก็คือการเรียกขอข้อมูลแบบ Ajax ซึ่งเราสามารถเปลี่ยนโค้ดในส่วนของ
route เพื่อทำงานด้านอื่นๆเช่นการ select ข้อมูลจาก
Database หรือว่าการรับค่ามาคำนวนก็ได้ และสามารถส่งข้อมูลชนิดไหนก็ได้ไม่ว่าจะเป็น list json string หรือ object ก็ได้ นั้นก็เป็นอีก 1 ข้อดีของการรับส่งไฟร์แบบ Ajax
อ้างอิง
https://api.jquery.com/jquery.get/
https://www.mindphp.com/บทเรียนออนไลน์/สอน-ajax/3157-แนะนำการใช้งาน-ajax-เบื้องต้น-ในการพัฒนา-web-programming.html
https://www.mindphp.com/forums/viewtopic.php?t=88209
