การรับไฟร์ ajax json มาใช้งานกับ flask python เพื่อส่งข้อมูล json ให้กับ server

[ewqolf]

การรับไฟร์ ajax json มาใช้งานกับ flask python เพื่อส่งข้อมูล json ให้กับ server ซึ่งทุกท่านอาจจะมีปัญหาในการส่งข้อมูล ajax ต่างๆไปยังฝั่งของ server python ซึ่งนี้ที่นี้ผมจะใช้งานการส่งข้อมูลด้วย ajax โดยข้อมูลที่ส่งนั้นจะมี format เป็น json ซึ่งปัญหาที่ทุกท่านอาจจะเจอนั้นก็คือการรับข้อมูล json จาก ajax นั้นทำอย่างไรแล้วจะเอามาใช้งานได้อย่างไรแล้วมีการส่งอย่างไรครับโดยในกระทู้นี้ผมจะแสดงวิธีการส่งและการใช้งานการรับข้อมูลและเอามาใช้งานกันครับผม

โดยในตอนเริ่มแรกในการใช้งาน flask python นั้นเราจะต้องทำการ install flask python ก่อนครับด้วยคำสั่ง

โค้ด: เลือกทั้งหมด

pip install flask

ที่หน้า CMD เมื่อเราทำการ install เสร็จเราก็ใช้งาน flask python ได้แล้วครับจากนั้นเราจะต้องขึ้นโครง server ของ python ครับโดยโครงของ flask python นั้นจะมีดังนี้ครับ

โค้ด: เลือกทั้งหมด

from flask import Flask,render_template,request
app=Flask(__name__)
app.config['SECRET_KEY']='secret_key'
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"

@app.route('/')
def test():
    return render_template('test.html')
    
if __name__==("__main__"):
    app.run()

ซึ่งเมื่อเราทำการรันไฟร์ python นี้แล้วเข้าลิ้งค์ 127.0.0.1:5000 ก็จะรันไฟร์ test.html ขึ้นมาซึ่งเราจะเขียนไฟร์ html เอาไว้ดังนี้ครับ
โดยในตอนเริ่มต้นนั้นเราจะต้องมีการใช้งาน jquery

โค้ด: เลือกทั้งหมด

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

จากนั้นเราก็จะสร้างปุ่มขึ้นมา 1 ปุ่มครับสำหรับการกดเพื่อส่ง ajax ไปให้ฝั่ง server ครับโดยปุ่มนี้จะเป็นปุ่มธรรมดาๆครับ

โค้ด: เลือกทั้งหมด

	<input type="button" id="autoC" value="ajax send">

ซึ่งเราก็จะได้ปุ่มมา 1 ปุ่มครับต่อมาเราจะมาเขียนฝั่ง javascript ต่อครับ

โค้ด: เลือกทั้งหมด

<script>
  $("#autoC").click(function(){ 
    $.ajax({
    url: '/ajax',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({'name': 'John', 'age': 30}),
    success: function(response) {
        console.log(response.data);
    }
});
  });
</script>

โดยฟังก์ชั่นนี้เมื่อเราทำการกดที่ปุ่มจะทำการส่ง ajax ไปที่ url /ajax ครับซึ่งเราจะต้องเขียน url ที่จะรับ ajax นี้ที่ python เพิ่มเติมครับ

โค้ด: เลือกทั้งหมด

@app.route('/ajax', methods=['GET','POST'])
def ajax():
    data = request.get_json()
    print(type(data))
    print(data["name"])
    return jsonify(data=data)

ผลลัพธ์การ print ข้อมูลจาก json ajax

ผลลัพธ์การ print ข้อมูลจาก json ajax.png (677 ไบต์) Viewed 2713 times

คำถามคือทำไมเรารับไฟร์ json มาแล้วทำไมเราถึงไม่ใช้งานเป็นไฟร์ json เพราะว่าใน python นั้นจะมี format นึงที่คล้ายกับตัวของ json อยู่นั้นมีชื่อว่า dict ซึ่งวิธีใช้งานนั้นจะแตกต่างกันนิดหน่อยในลักษณะการเขียนเรียกใช้ข้อมูลในตัวแปรเพราะว่าที่ส่งมานั่น format ตรงกับตัว json ก็เลยทำให้มีการเปลี่ยนชนิดได้ซึ่งผมก็ได้ทำการ log ตัวของ data type ออกมาเพื่อให้ได้ทราบว่าไฟร์นั้นเป็นไฟร์ประเภทใดครับ

อ้างอิง
https://towardsdatascience.com/using-python-flask-and-ajax-to-pass-information-between-the-client-and-server-90670c64d688
https://flask.palletsprojects.com/en/2.0.x/patterns/jquery/
https://ayumitanaka13.medium.com/how-to-use-ajax-with-python-flask-729c0a8e5346