Framework7 ব্যবহার করে AJAX রিকোয়েস্ট খুব সহজেই করা যায়। এটি জাভাস্ক্রিপ্টের fetch(), XMLHttpRequest(), অথবা অ্যাক্সিওসের মতো থার্ড-পার্টি লাইব্রেরি ছাড়াই ডেটা ফেচ করতে পারে। Framework7 এর অন্তর্নির্মিত app.request API ব্যবহার করে আপনি সার্ভার থেকে ডেটা রিট্রিভ করতে পারেন।
AJAX রিকোয়েস্ট শুরু করা
Framework7 এ AJAX রিকোয়েস্ট করার জন্য app.request ব্যবহার করা হয়। এটি GET, POST, PUT, DELETE সহ বিভিন্ন HTTP মেথড সমর্থন করে। সাধারণত GET রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা হয়।
সাধারণ উদাহরণ
নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে সার্ভার থেকে JSON ডেটা ফেচ করে পৃষ্ঠায় দেখানো হবে। ধরুন আমাদের একটি এন্ডপয়েন্ট আছে: https://api.example.com/data যা JSON ফরম্যাটে ডেটা রিটার্ন করে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Framework7 AJAX Example</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css"> </head> <body> <div id="app"> <div class="view view-main"> <div class="page" data-name="home"> <div class="navbar"> <div class="navbar-inner"> <div class="title">AJAX Data Fetch</div> </div> </div> <div class="page-content"> <div class="block"> <button id="fetchDataBtn" class="button button-fill">Fetch Data</button> </div> <div class="block"> <div id="dataContainer"></div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script> <script> var app = new Framework7({ root: '#app', }); var ('#fetchDataBtn').on('click', function() { // AJAX রিকোয়েস্ট শুরু app.request.get('https://api.example.com/data', function (response) { // response একটি স্ট্রিং, এটিকে JSON এ কনভার্ট করা var data = JSON.parse(response); // ডেটা পেয়ে পৃষ্ঠায় দেখানো var html = ''; data.forEach(function(item){ html += '<p>'+ item.name +'</p>'; }); $$('#dataContainer').html(html); }, function (error) { // ত্রুটি হ্যান্ডলিং app.dialog.alert('Error fetching data'); }); });) সিলেক্টর ব্যবহার করে HTML এলিমেন্টে ডেটা যুক্ত বা সংশোধন করা যায়। অতিরিক্তভাবে, লোডার বা স্পিনার ব্যবহার করে AJAX কলের সময় লোডিং স্টেট দেখাতে পারেন।উপরের উদাহরণে
#fetchDataBtnক্লিক করলেapp.request.get()ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা হয়। সফলভাবে ডেটা পাওয়া গেলে JSON ডেটা প্যার্স করে পৃষ্ঠায় প্রদর্শন করা হয়। ত্রুটি ঘটলে অ্যালার্টের মাধ্যমে তা দেখানো হয়।অন্যান্য় কনফিগারেশন এবং অপশন
app.request.get()ছাড়াওapp.request.post(),app.request.put(),app.request.delete()ইত্যাদি ব্যবহার করে সার্ভারে ডেটা পাঠানো বা আপডেট করা যায়। এছাড়া হেডার, টাইমআউট, এবং কুকিজ ম্যানেজমেন্টের জন্য অতিরিক্ত অপশনও দেওয়া যায়।উদাহরণ: কাস্টম হেডার পাঠানো
app.request({ url: 'https://api.example.com/data', method: 'GET', headers: { 'Authorization': 'Bearer your_token_here' }, success: function (response) { var data = JSON.parse(response); console.log(data); }, error: function (error) { console.error('Error:', error); } });উপরের উদাহরণে কাস্টম হেডার (
Authorization) পাঠিয়ে সার্ভার থেকে ডেটা ফেচ করা হয়েছে।সার্ভার থেকে ডেটা ফেচের পর UI আপডেট
সার্ভার থেকে ডেটা পাওয়ার পর সাধারণত UI আপডেট বা DOM ম্যানিপুলেশন করা হয়। এর জন্য Dom7 (
$$Framework7 এর AJAX সুবিধা ব্যবহার করে সার্ভার থেকে ডেটা ফেচ করা সহজ এবং কার্যকর। এটি ডেভেলপারদের কম কোডে দ্রুত ইমপ্লিমেন্টেশন নিশ্চিত করে এবং অ্যাপ্লিকেশনকে আরো ডায়নামিক করে তোলে।
Read more
