Ajax:
JavaScripts sending a request to a python server(Flask/DJango) and receiving data(mostly JSON, not XML in modern applications)without reloading the page
(Communicating with database, dynamically publish the data)
Introduction to Ajax:(Asynchronous JavaScript and XML)
"AJAX allows apart of a webpage to update without refreshing the whole page."
Build APIs using Flask/Django
Send data using AJAX
Update UI Dynamically
A JAX Works in 2 directions:
1.Send data to server
2. Receive data from server
(Ajax usually use HTTP methods:GET,POST,PUT,DELETE)
Flask light weight tools
Practical
Task Step1: index.html
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
<button onclick="GetData()"> Get data</button>
<p id ="result"></p>
<script>
function GetData(){
fetch("/get_message").then(response => response.text()).then(data => {
document.getElementById("result").innerText = data;
});
}
</script>
</html>
Step2:app.py
from flask import Flask, render_template
app = Flask(__name__) #Objet creation
@app.route('/') #route definition
def home(): #function definition
return render_template('index.html') #rendering template
@app.route('/get_message') #route definition
def get_message():
return "Database Call" #simple function to return a message
if __name__ == '__main__': #main check
app.run(debug=True) #app run in debug mode
Output:When click Getdata button ,without complete page load just publish the message that is called ajax call
Task2: Get data from .csv file
app.py
from flask import Flask, render_template,jsonify
import csv
app = Flask(__name__) #Object creation
@app.route('/') #route definition
def home(): #function definition
return render_template('index.html') #rendering template
@app.route('/students') #route definition
def students123():
students=[] #empty list to hold student data
with open('student.csv',newline='') as csvfile: #opening csv file
csvreader=csv.DictReader(csvfile) #reading csv file as dictionary
for row in csvreader: #iterating through each row
students.append(row) #appending row to students list
return jsonify(students) #returning students list as JSON response
@app.route('/set_message') #route definition
def set_message():
return "Set message Call" #simple function to return a message
if __name__ == '__main__': #main check
app.run(debug=True) #app run in debug mode
inde.html
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
<button onclick="GetData()"> Get data</button>
<!--<p id ="result"></p>-->
<br> </br>
<table style="border: 2px solid black;" id="stdtable">
<thead>
<tr>
<th>studentID</th>
<th>studentName</th>
<th>Course</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
<script>
function GetData(){
fetch("/students")
.then(response => response.json())
.then(data =>
{ let tablebody=document.getElementById("result");
tablebody.innerHTML="";
data.forEach(student=>{
let row=`<tr>
<td>${student.student_id}</td>
<td>${student.name}</td>
<td>${student.course}</td>
</tr>`;
tablebody.innerHTML+=row;
});
});
}
</script>
</html>
student.csv
student_id,name,course
10,Subrah,AWS
11,Ravi1,Tester
12,Karthik,Developer
Output
Thanks
No comments:
Post a Comment