AJAX (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি, যা ওয়েব পেজের সাথে ডাটা বিনিময় করতে ব্যবহৃত হয়, কিন্তু পুরো পেজ রিলোড না করে। CodeIgniter ব্যবহার করে AJAX রিকোয়েস্ট এবং রেসপন্স হ্যান্ডল করা খুব সহজ। এই টিউটোরিয়ালে আমরা AJAX রিকোয়েস্টের মাধ্যমে ডাটা পাঠানো এবং রেসপন্স গ্রহণ করা, এবং এর সাথে সাথে যে কোনো এর্নর বা সমস্যা হ্যান্ডল করার পদ্ধতি শিখব।
AJAX রিকোয়েস্ট পাঠানোর জন্য সাধারণত jQuery ব্যবহার করা হয়। CodeIgniter সার্ভারে ডাটা পাঠাতে এবং রেসপন্স নিতে আমরা jQuery দিয়ে AJAX কল করতে পারি।
HTML ফাইল (view) এ AJAX Request পাঠানো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>AJAX with CodeIgniter</h1>
<button id="loadData">Load Data</button>
<div id="response"></div>
<script>
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url: '<?= site_url('ajaxcontroller/fetchData') ?>', // URL of the controller method
type: 'GET', // Type of request
dataType: 'json', // Expected response data type
success: function(response) {
if(response.status === 'success') {
$('#response').html(response.data);
} else {
$('#response').html('<p>Error: ' + response.message + '</p>');
}
},
error: function(xhr, status, error) {
$('#response').html('<p>AJAX Error: ' + error + '</p>');
}
});
});
});
</script>
</body>
</html>
Controller এ AJAX রিকোয়েস্ট হ্যান্ডল করার জন্য, আপনাকে JSON রেসপন্স ফেরত দিতে হবে, যা jQuery দ্বারা প্রক্রিয়া করা হবে।
app/Controllers/AjaxController.php
:
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class AjaxController extends Controller
{
public function fetchData()
{
// ডাটা প্রস্তুত
$data = [
'status' => 'success',
'data' => 'This is data fetched via AJAX!',
];
// JSON রেসপন্স
return $this->response->setJSON($data);
}
}
app/Config/Routes.php
ফাইলে নতুন রাউট যোগ করুন:
$routes->get('ajaxcontroller/fetchData', 'AjaxController::fetchData');
AJAX রেসপন্স হ্যান্ডল করার সময়, আপনাকে সফল এবং ব্যর্থ (error) উভয় রেসপন্স হ্যান্ডল করতে হবে।
success
স্ট্যাটাস সহ ডাটা পাঠাতে পারেন।error
স্ট্যাটাস সহ একটি ত্রুটি বার্তা পাঠাতে হবে।public function fetchData()
{
try {
// কিছু ডাটা প্রক্রিয়া করা (ডাটাবেস থেকে ডেটা নেওয়া, ইত্যাদি)
$data = [
'status' => 'success',
'data' => 'This is data fetched successfully!'
];
// JSON রেসপন্স
return $this->response->setJSON($data);
} catch (\Exception $e) {
// কোনো ত্রুটি হলে
$errorData = [
'status' => 'error',
'message' => 'Something went wrong: ' . $e->getMessage()
];
// ত্রুটির JSON রেসপন্স পাঠানো
return $this->response->setJSON($errorData);
}
}
AJAX রিকোয়েস্টে যখন কোনো ত্রুটি ঘটে (যেমন নেটওয়ার্ক সমস্যা বা সার্ভার ত্রুটি), তখন আপনাকে error ফাংশন ব্যবহার করে ত্রুটির বার্তা শো করতে হবে।
$.ajax({
url: '<?= site_url('ajaxcontroller/fetchData') ?>',
type: 'GET',
dataType: 'json',
success: function(response) {
if(response.status === 'success') {
$('#response').html(response.data);
} else {
$('#response').html('<p>Error: ' + response.message + '</p>');
}
},
error: function(xhr, status, error) {
$('#response').html('<p>AJAX Error: ' + error + '</p>');
}
});
এখানে, যদি সার্ভার বা নেটওয়ার্কে কোনো সমস্যা থাকে, তখন error
ফাংশন কাজ করবে এবং আপনি ত্রুটির বার্তা দেখতে পাবেন।
AJAX রিকোয়েস্টের রেসপন্স সাধারণত JSON ফরম্যাটে দেওয়া হয়, যা jQuery দ্বারা প্রসেস করা হয়। আপনি চাইলে এটি text
বা html
ফরম্যাটেও পাঠাতে পারেন।
$data = [
'status' => 'success',
'message' => 'Data successfully fetched!'
];
return $this->response->setJSON($data);
error
ফাংশন ব্যবহার করা হয়।এই পদ্ধতি ব্যবহার করে আপনি CodeIgniter এ AJAX রিকোয়েস্ট এবং রেসপন্স কার্যকরভাবে হ্যান্ডল করতে পারবেন এবং যেকোনো ত্রুটি সঠিকভাবে প্রদর্শন করতে পারবেন।
Read more