ซึ่งวิธีการเขียน each นั้นก็ไม่ยากนักซึ่งเหมือนกันทุกครั้งที่เราต้องการจะใช้งาน jquery เราจำเป็นที่จะต้องประกาศที่หัวขึ้นมาก่อนโดยโค้ด
โค้ด: เลือกทั้งหมด
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
โค้ด: เลือกทั้งหมด
<div id="output"></div>
จากนั้นให้เราเปิดแท็ค script ขึ้นมาตามด้วยโค้ดด้านล่าง
โค้ด: เลือกทั้งหมด
<script>
$.get('/test', function(data) {
$.each(data, function(k,v){
let show=document.getElementById("ncardr")
show.append(`${v} `)
})
})
</script>
โค้ด: เลือกทั้งหมด
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 = ["nineA","nineB","nineC","nineD"]
return x
จากโค้ดนี้ เราก็จะได้ผลลัพธ์ จากโค้ดจะเห็นได้ว่าเราจะต้องทำการเปิดแท็ค Flask ขึ้นมาเสียก่อนจากนั้นให้เราทำการ rount ไปที่ / ก่อนแล้วให้ render ไปที่หน้า index.html ก่อนจากนั้นพอไปที่หน้า index.html จากนั้นก็จะเจอโค้ดที่จะมีคำสั่ง Get ซึ่งจะกลับมารันโค้ดในส่วนของ route URL ซึ่งก็จะ return ค่า x กลับมาที่หน้า index.html จากนั้นเราได้ค่า x ที่เป็น list อยู่ใน Data จากนั้นจะมีการแยกตัวแปรกันเกิดขึ้นก็คือตัวแปร k และตัวแปร v ตัวแปร k นั้นจะเก็บเลขของชุดข้อมูลนั้นๆว่าเป็นข้อมูลชุดที่เท่าไหร่ๆ และตัวแปร v จะเป็นส่วนของข้อมูล ซึ่งการที่เราจะเอาข้อมูลนั้นมาใช้ได้เราก็จะต้องเขียนว่าเราต้องการแสดงอะไรบ้างในส่วนโค้ด append ซึ่งข้างในนั้นสามารถเขียนเป็นภาษา HTML ได้โดยเราจะต้องใช้ `` ก่อนแล้วการเขียนโค้ด HTML แล้วเราอยากเอาตัวแปรใส่เข้าไปด้วยเราจะต้องใช้ ${v} แทนตัวแปรเฉพาะในส่วนของ html
อ้างอิง
https://api.jquery.com/jquery.each/
https://stackoverflow.com/questions/733314/jquery-loop-over-json-result-from-ajax-success
https://makitweb.com/how-to-use-the-each-function-in-jquery/