AJAX রিকুয়েস্ট এবং Partial Update উদাহরণ
AJAX (Asynchronous JavaScript and XML) ব্যবহার করে আমরা ওয়েব পৃষ্ঠায় ডাইনামিক কন্টেন্ট লোড এবং আপডেট করতে পারি। HTMX লাইব্রেরি ব্যবহার করে AJAX রিকুয়েস্ট তৈরি করা এবং Partial Update করার প্রক্রিয়া খুব সহজ এবং কার্যকরী। নিচে AJAX রিকুয়েস্ট এবং Partial Update এর একটি উদাহরণ সহ বর্ণনা করা হলো।
১. পরিবেশ সেটআপ
১.১. HTML ফাইল তৈরি
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Request and Partial Update Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
</head>
<body>
<h1>AJAX Request and Partial Update Example</h1>
<!-- Button to load content -->
<button hx-get="/load-data" hx-target="#data-container">Load Data</button>
<div id="data-container">
<p>This is the initial content.</p>
</div>
<!-- Form to submit new data -->
<form hx-post="/submit-data" hx-target="#data-list" hx-swap="beforeend">
<input type="text" name="item" placeholder="Add a new item" required>
<button type="submit">Add Item</button>
</form>
<h2>Items</h2>
<ul id="data-list">
<!-- New items will be added here -->
</ul>
</body>
</html>
২. সার্ভার সাইড সেটআপ (Flask)
২.১. Python Flask ব্যবহার করে সার্ভার তৈরি করুন
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
items = []
@app.route('/')
def index():
return render_template_string('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Request and Partial Update Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
</head>
<body>
<h1>AJAX Request and Partial Update Example</h1>
<button hx-get="/load-data" hx-target="#data-container">Load Data</button>
<div id="data-container">
<p>This is the initial content.</p>
</div>
<form hx-post="/submit-data" hx-target="#data-list" hx-swap="beforeend">
<input type="text" name="item" placeholder="Add a new item" required>
<button type="submit">Add Item</button>
</form>
<h2>Items</h2>
<ul id="data-list">
{% for item in items %}
<li>{{ item }}</li>
{% endfor %}
</ul>
</body>
</html>
''')
@app.route('/load-data')
def load_data():
return "<p>This content was loaded dynamically via AJAX!</p>"
@app.route('/submit-data', methods=['POST'])
def submit_data():
item = request.form['item']
items.append(item)
return f'<li>{item}</li>' # Return new list item as response
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. টার্মিনালে সার্ভার চালান
python app.py
- এটি আপনার Flask অ্যাপ্লিকেশনটি চালু করবে এবং এটি
http://127.0.0.1:5000/ঠিকানায় উপলব্ধ হবে।
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - "Load Data" বোতামে ক্লিক করুন এবং দেখুন কিভাবে নতুন কন্টেন্ট
#data-containerডিভে লোড হচ্ছে। - একটি নতুন আইটেম যোগ করতে ফর্মটি ব্যবহার করুন এবং "Add Item" বোতামে ক্লিক করুন। এটি নতুন আইটেমটি
#data-listএ যুক্ত করবে।
সারসংক্ষেপ
- AJAX রিকুয়েস্ট: HTMX ব্যবহার করে AJAX কলের মাধ্যমে সার্ভার থেকে নতুন কন্টেন্ট লোড করা হয়।
- Partial Update: শুধুমাত্র নির্দিষ্ট অংশ আপডেট করার প্রক্রিয়া, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
- Flask: Flask ব্যবহার করে সার্ভার সাইডে AJAX অনুরোধগুলি পরিচালনার সহজ প্রক্রিয়া তৈরি করা হয়েছে।
HTMX এর সাহায্যে AJAX রিকুয়েস্ট এবং Partial Update করা একটি সহজ এবং কার্যকরী পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনগুলিকে আরো দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে।
Content added By
Read more
