AJAX (Asynchronous JavaScript and XML) একটি প্রযুক্তি, যা ওয়েব পেজে যেকোনো পরিবর্তন করার জন্য সার্ভারের সাথে যোগাযোগ করতে সাহায্য করে, কিন্তু পুরো পেজ রিফ্রেশ করা লাগে না। CodeIgniter-এ AJAX ইন্টিগ্রেশন ব্যবহার করে আপনি ডাইনামিক এবং রিয়েল-টাইম কার্যকলাপ তৈরি করতে পারেন।
Frontend-এ AJAX রিকোয়েস্ট পাঠানোর জন্য আপনি সাধারণত JavaScript/jQuery ব্যবহার করবেন। CodeIgniter-এ AJAX রিকোয়েস্ট পাঠানোর জন্য jQuery একটি জনপ্রিয় টুল। নিচে jQuery এর মাধ্যমে AJAX রিকোয়েস্ট পাঠানোর উদাহরণ দেখানো হলো।
<!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>
<!-- Button to trigger AJAX -->
<button id="getDataBtn">Get Data</button>
<div id="result"></div> <!-- Result will be shown here -->
<script>
$(document).ready(function() {
$('#getDataBtn').click(function() {
// AJAX request
$.ajax({
url: '/product/fetchData', // Controller method URL
type: 'GET', // Request type
success: function(response) {
// On success, append the result
$('#result').html(response);
},
error: function(xhr, status, error) {
// On error, display error message
$('#result').html('Something went wrong. Please try again later.');
}
});
});
});
</script>
</body>
</html>
#getDataBtn বাটনে ক্লিক করলে AJAX রিকোয়েস্ট পাঠানো হবে এবং সার্ভার থেকে প্রাপ্ত ডেটা #result ডিভে প্রদর্শিত হবে।/product/fetchData URL-এ পাঠানো হবে।CodeIgniter Controller-এ একটি মেথড তৈরি করুন, যা AJAX রিকোয়েস্টটি গ্রহণ করবে এবং ডেটা ফেরত পাঠাবে।
app/Controllers/Product.php:
<?php
namespace App\Controllers;
use App\Models\ProductModel;
class Product extends BaseController
{
public function fetchData()
{
$productModel = new ProductModel();
// ডেটা ফেচ করা
$products = $productModel->findAll();
// JSON ফরম্যাটে ডেটা রিটার্ন করা
return $this->response->setJSON($products);
}
}
fetchData() মেথডটি ProductModel থেকে সমস্ত ডেটা রিট্রিভ করবে এবং JSON আউটপুট পাঠাবে।app/Models/ProductModel.php ফাইল তৈরি করুন। এখানে products টেবিল থেকে ডেটা ফেচ করা হবে।
<?php
namespace App\Models;
use CodeIgniter\Model;
class ProductModel extends Model
{
protected $table = 'products'; // টেবিলের নাম
protected $primaryKey = 'id'; // প্রাইমারি কী
protected $allowedFields = ['name', 'category', 'price']; // ইনসার্ট/আপডেট ফিল্ডগুলো
}
app/Config/Routes.php ফাইলে AJAX রিকোয়েস্টের জন্য Route তৈরি করুন।
$routes->get('product/fetchData', 'Product::fetchData');
উপরের কোডে products টেবিল ব্যবহার করা হয়েছে। সুতরাং, ডাটাবেসে এই টেবিলটি তৈরি করুন:
CREATE TABLE products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
category VARCHAR(255),
price DECIMAL(10, 2)
);
INSERT INTO products (name, category, price) VALUES
('Laptop', 'Electronics', 50000),
('Smartphone', 'Electronics', 20000),
('Table', 'Furniture', 1500),
('Chair', 'Furniture', 800);
$.ajax() ফাংশনটি GET পদ্ধতিতে /product/fetchData URL-এ রিকোয়েস্ট পাঠাবে।success কলে সার্ভার থেকে প্রাপ্ত JSON ডেটা #result ডিভে প্রদর্শিত হবে।error কলে কোনো সমস্যা হলে, একটি ত্রুটি মেসেজ দেখানো হবে।fetchData() মেথডটি ProductModel থেকে সমস্ত ডেটা রিট্রিভ করবে এবং JSON ফরম্যাটে ফেরত পাঠাবে।setJSON() ফাংশনটি ডেটাকে JSON আউটপুটে কনভার্ট করবে।ProductModel ডাটাবেস থেকে findAll() মেথডের মাধ্যমে সমস্ত পণ্য (products) তথ্য রিট্রিভ করবে।/product/fetchData URL-এ রিকোয়েস্ট পাঠালে Product::fetchData মেথড কল হবে এবং ডেটা ফেরত আসবে।AJAX ব্যবহার করে ব্যবহারকারী যখন সার্চ বক্সে কিছু টাইপ করবে, তখন সার্ভার থেকে ডেটা ফিল্টার করে ফলাফল দেখানো যাবে।
একটি ড্রপডাউন মেনু নির্বাচন করলে অন্য ড্রপডাউন বা কন্টেন্ট পরিবর্তন করার জন্য AJAX ব্যবহার করা যায়।
AJAX দিয়ে ফর্ম সাবমিশন করা, যাতে পেজ রিফ্রেশ না হয় এবং ব্যবহারকারীকে একটি সফল বা ত্রুটি মেসেজ দেখানো যায়।
AJAX Integration CodeIgniter-এ খুব সহজ এবং কার্যকরীভাবে করা যায়। এটি ডেটা লোডিং এবং ফর্ম সাবমিশন প্রক্রিয়াকে দ্রুত এবং রিয়েল-টাইম করে তোলে। CodeIgniter-এ AJAX ব্যবহার করার মাধ্যমে, আপনি একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন যা পেজ রিফ্রেশ ছাড়াই দ্রুত রেসপন্স দেয়।
AJAX (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পৃষ্ঠাগুলির জন্য অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জের অনুমতি দেয়, যার মাধ্যমে পৃষ্ঠা রিফ্রেশ না করেই ডেটা লোড এবং আপডেট করা যায়। CodeIgniter এর সাথে AJAX ইন্টিগ্রেশন ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং অ্যাপ্লিকেশনকে দ্রুত এবং ইন্টারঅ্যাকটিভ করতে সহায়ক।
AJAX এ ডেটা পাঠানো এবং গ্রহণ করা হয় JavaScript (বা jQuery) এর মাধ্যমে, এবং CodeIgniter এ এই ডেটা প্রক্রিয়া করা হয় Controller এবং Model এর মাধ্যমে। নিচে AJAX এবং CodeIgniter এর মধ্যে ইন্টিগ্রেশন করার জন্য ধাপে ধাপে প্রক্রিয়া দেওয়া হয়েছে।
ধরা যাক, আমরা একটি ফর্ম তৈরি করছি যেখানে ব্যবহারকারী তার নাম ইনপুট দিবে এবং আমরা সেটি AJAX এর মাধ্যমে পাঠাবো।
<form id="ajaxForm">
<label for="username">Enter Your Name:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
এখন, jQuery ব্যবহার করে ফর্মটি সাবমিট করা হবে এবং AJAX এর মাধ্যমে ডেটা পাঠানো হবে।
$(document).ready(function() {
$("#ajaxForm").submit(function(event) {
event.preventDefault(); // Form এর ডিফল্ট সাবমিশন বন্ধ করা
var username = $("#username").val(); // ইনপুট থেকে ডেটা নেওয়া
$.ajax({
url: "<?php echo base_url('ajax/submit'); ?>", // CodeIgniter Controller এর URL
type: "POST", // HTTP Method
data: { username: username }, // ডেটা পাঠানো
success: function(response) { // রেসপন্স পাওয়ার পরে
$("#response").html(response); // রেসপন্স DOM-এ দেখানো
}
});
});
});
AJAX রিকোয়েস্ট গ্রহণ করতে, একটি Controller তৈরি করতে হবে। এখানে আমরা ajax/submit URL দিয়ে AJAX রিকোয়েস্ট গ্রহণ করব।
namespace App\Controllers;
use CodeIgniter\Controller;
class AjaxController extends Controller
{
public function submit()
{
// AJAX রিকোয়েস্ট থেকে ইনপুট গ্রহণ
$username = $this->request->getPost('username');
// এখানে আপনি আপনার লজিক বা ডেটাবেস অপারেশন করতে পারেন
if ($username) {
// যদি নাম প্রাপ্ত হয়, সাফল্য বার্তা পাঠানো
return "Hello, " . $username . "!";
} else {
// যদি নাম না পাওয়া যায়, ত্রুটি বার্তা পাঠানো
return "No username received!";
}
}
}
app/Config/Routes.php ফাইলে AJAX রিকোয়েস্টের জন্য route কনফিগার করুন:
$routes->post('ajax/submit', 'AjaxController::submit');
ধরা যাক, আপনি AJAX এর মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করতে চান।
প্রথমে, একটি Model তৈরি করুন যা ডাটাবেস থেকে ডেটা ফেচ করবে:
namespace App\Models;
use CodeIgniter\Model;
class ProductModel extends Model
{
protected $table = 'products';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'description', 'price'];
}
AJAX রিকোয়েস্টে ডাটাবেস থেকে ডেটা পাঠাতে, Controller এ Model ব্যবহার করতে হবে।
namespace App\Controllers;
use App\Models\ProductModel;
use CodeIgniter\Controller;
class ProductController extends Controller
{
public function getProducts()
{
$model = new ProductModel();
$products = $model->findAll();
// JSON রেসপন্স পাঠানো
return $this->response->setJSON($products);
}
}
app/Config/Routes.php ফাইলে getProducts এর জন্য route কনফিগার করুন:
$routes->get('ajax/products', 'ProductController::getProducts');
AJAX এর মাধ্যমে ডেটা ফেচ করার জন্য jQuery কোড:
$(document).ready(function() {
$.ajax({
url: "<?php echo base_url('ajax/products'); ?>",
type: "GET",
success: function(response) {
var products = JSON.parse(response);
var html = "<ul>";
products.forEach(function(product) {
html += "<li>" + product.name + " - $" + product.price + "</li>";
});
html += "</ul>";
$("#response").html(html);
}
});
});
CodeIgniter এবং AJAX এর মাধ্যমে ইন্টিগ্রেশন করে আপনি ডেটা লোড, ফর্ম সাবমিট এবং ফিল্টারিং সহ আরও অনেক ফিচার ইমপ্লিমেন্ট করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। AJAX এর মাধ্যমে CodeIgniter এ অ্যাসিনক্রোনাস ডেটা এক্সচেঞ্জ এবং ডাইনামিক ইন্টারফেস তৈরি করা যায়, যা আধুনিক ওয়েব অ্যাপ্লিকেশনগুলোর জন্য অপরিহার্য।
AJAX (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পেজের অংশগুলির মধ্যে ডেটা বিনিময় করতে ব্যবহার হয়, যেখানে পেজ রিফ্রেশ করার প্রয়োজন পড়ে না। CodeIgniter ব্যবহার করে আপনি সহজে AJAX কল তৈরি করতে এবং ডেটা পাঠাতে পারেন। এখানে CodeIgniter এবং jQuery এর মাধ্যমে AJAX কল তৈরি এবং ডেটা পাঠানোর প্রক্রিয়া দেখানো হয়েছে।
AJAX কলের জন্য সাধারণত jQuery ব্যবহার করা হয়, যা ক্লায়েন্ট সাইডের স্ক্রিপ্ট হিসেবে কাজ করে।
প্রথমে একটি Controller তৈরি করুন, যা AJAX কল গ্রহণ করবে এবং ডেটা প্রক্রিয়া করবে।
namespace App\Controllers;
use CodeIgniter\Controller;
class AjaxController extends Controller {
// AJAX কল দ্বারা প্রাপ্ত ডেটা প্রক্রিয়া করা
public function getData() {
// AJAX থেকে প্রাপ্ত ডেটা
$name = $this->request->getPost('name');
$email = $this->request->getPost('email');
// ডেটা প্রসেস করা (যেমন, ডাটাবেসে সংরক্ষণ)
$data = [
'name' => $name,
'email' => $email
];
// ডেটা রিটার্ন করা
return $this->response->setJSON($data);
}
}
app/Config/Routes.php ফাইলে এই Controller এর রাউট কনফিগার করুন:
$routes->post('ajax/getdata', 'AjaxController::getData');
AJAX কল করতে একটি ফর্ম এবং jQuery ব্যবহার করে ফাইল তৈরি করুন।
<!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 Example in CodeIgniter</h1>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>
$(document).ready(function() {
$("#myForm").on("submit", function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.ajax({
url: '<?= site_url('ajax/getdata') ?>', // AJAX URL
type: 'POST',
data: {
name: name,
email: email
},
success: function(response) {
// সফল হলে, response প্রদর্শন করুন
var data = JSON.parse(response);
$('#response').html("Name: " + data.name + "<br>Email: " + data.email);
},
error: function() {
$('#response').html('Error occurred');
}
});
});
});
</script>
</body>
</html>
$.ajax() ফাংশন কল হবে।url: এটি AJAX কলের URL যেখানে ডেটা পাঠানো হবে।data: ফর্মের ডেটা name এবং email এখানে পাঠানো হচ্ছে।Error occurred দেখানো হবে।এটা নিশ্চিত করতে হবে যে, সার্ভার থেকে সঠিকভাবে JSON ডেটা রিটার্ন হচ্ছে। CodeIgniter এ JSON ডেটা রিটার্ন করতে response->setJSON() ফাংশন ব্যবহার করতে হয়, যা আপনি Controller এ আগে দেখেছেন।
return $this->response->setJSON($data);
এটি ক্লায়েন্ট সাইডে JSON ডেটা পাঠাবে, যা আপনি AJAX কলের success ফাংশনে ব্যবহার করতে পারবেন।
AJAX কলের সময় যদি কিছু ভুল হয়, তবে আপনি ক্লায়েন্ট সাইডে ভাল error handling করতে পারেন। উদাহরণস্বরূপ, ফর্ম ভ্যালিডেশন করা:
public function getData() {
$validation = \Config\Services::validation();
// ইনপুট যাচাই
$validation->setRules([
'name' => 'required|min_length[3]',
'email' => 'required|valid_email'
]);
if (!$validation->withRequest($this->request)->run()) {
return $this->response->setJSON(['error' => $validation->getErrors()]);
}
$name = $this->request->getPost('name');
$email = $this->request->getPost('email');
$data = ['name' => $name, 'email' => $email];
return $this->response->setJSON($data);
}
এতে ফর্মে কোন ইনপুট ভুল হলে, আপনি validation errors পাঠাতে পারেন।
এটা ক্লিয়ার করতে হবে যে, AJAX এর মাধ্যমে পাঠানো ডেটা কীভাবে প্রসেস করা হচ্ছে এবং সার্ভার থেকে কীভাবে রেসপন্স ফিরে আসছে।
$.ajax({
url: '<?= site_url('ajax/getdata') ?>',
type: 'POST',
data: {
name: name,
email: email
},
success: function(response) {
if(response.error) {
// ভুল হলে ত্রুটি দেখান
$('#response').html('Error: ' + response.error.name);
} else {
// ডেটা সফলভাবে পাঠানো হলে, তা রিটার্ন করুন
$('#response').html("Name: " + response.name + "<br>Email: " + response.email);
}
},
error: function() {
$('#response').html('Error occurred');
}
});
AJAX কলের মাধ্যমে CodeIgniter-এ ডেটা পাঠানো এবং রিটার্ন করা খুব সহজ। $.ajax() ব্যবহার করে আপনি সার্ভারে ডেটা পাঠাতে পারেন এবং সেই ডেটাকে JSON রেসপন্স হিসেবে রিটার্ন করতে পারেন। CodeIgniter এর Validation ফাংশন ব্যবহার করে ডেটা যাচাই করা এবং response->setJSON() ব্যবহার করে JSON রিটার্ন করা হয়। AJAX এর মাধ্যমে ফর্ম ডেটা পাঠানোর সময় সার্ভারের ত্রুটি বা সফলতা খুব সহজেই ক্লায়েন্ট সাইডে প্রদর্শন করা যায়।
JSON (JavaScript Object Notation) এবং AJAX (Asynchronous JavaScript and XML) হল দুটি গুরুত্বপূর্ণ প্রযুক্তি যা ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ডেটা আদান-প্রদান সহজ করে। CodeIgniter-এ JSON এবং AJAX ব্যবহার করে ডেটা প্রসেস করার জন্য বেশ কিছু সহজ পদ্ধতি রয়েছে, যা ডেভেলপমেন্ট প্রক্রিয়াকে আরও কার্যকরী এবং রিয়েল-টাইম ইন্টারঅ্যাকটিভ করে তোলে।
JSON হল একটি হালকা ডেটা বিনিময় ফরম্যাট যা মানব-পঠনযোগ্য এবং মেশিন-পঠনযোগ্য। এটি সাধারণত ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে ডেটা আদান-প্রদানের জন্য ব্যবহৃত হয়।
AJAX হল একটি প্রযুক্তি যা ওয়েব পেজের কনটেন্টকে অ্যাসিনক্রোনাসভাবে আপডেট করার জন্য ব্যবহৃত হয়। এটি পেজ রিলোড না করে ডেটা সার্ভার থেকে আনলোড বা আপলোড করতে সক্ষম। AJAX এর মাধ্যমে ওয়েব পেজের পারফরম্যান্স বাড়ানো যায় এবং ব্যবহারকারীর অভিজ্ঞতাও উন্নত হয়।
CodeIgniter এ AJAX কল করার জন্য আপনাকে সাধারণত JSON ডেটা প্রেরণ করতে হবে। নিচে একটি উদাহরণ দেখানো হলো যেখানে AJAX ব্যবহার করে ডেটা পাঠানো হয় এবং JSON রেসপন্স ফেরত পাওয়া যায়।
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class AjaxExample extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
}
public function index() {
$this->load->view('ajax_view');
}
public function get_user_data() {
// ডেটা (উদাহরণস্বরূপ)
$data = array(
'name' => 'John Doe',
'email' => 'john.doe@example.com',
'age' => 28
);
// JSON রেসপন্স পাঠানো
echo json_encode($data);
}
}
get_user_data মেথডটি একটি অ্যাসোসিয়েটিভ অ্যারে তৈরি করে এবং json_encode ফাংশনের মাধ্যমে JSON ফরম্যাটে ক্লায়েন্টে রেসপন্স পাঠায়।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function fetchUserData() {
$.ajax({
url: '<?php echo site_url("ajaxexample/get_user_data"); ?>', // Controller URL
type: 'GET',
dataType: 'json', // Expected response type
success: function(response) {
$('#name').text(response.name);
$('#email').text(response.email);
$('#age').text(response.age);
},
error: function() {
alert("Error in AJAX request");
}
});
}
</script>
</head>
<body>
<h1>AJAX and JSON Example</h1>
<button onclick="fetchUserData()">Fetch User Data</button>
<p><strong>Name:</strong> <span id="name"></span></p>
<p><strong>Email:</strong> <span id="email"></span></p>
<p><strong>Age:</strong> <span id="age"></span></p>
</body>
</html>
fetchUserData() ফাংশনটি get_user_data() মেথডে AJAX কল করে, যা JSON ফরম্যাটে রেসপন্স পাঠায়। সেই রেসপন্স ডেটা #name, #email, এবং #age স্প্যানের মধ্যে প্রদর্শিত হয়।public function save_data() {
// POST ডেটা গ্রহণ
$name = $this->input->post('name');
$email = $this->input->post('email');
// ডেটাবেসে সংরক্ষণ বা প্রক্রিয়া করা
// ...
// JSON রেসপন্স পাঠানো
$response = array('status' => 'success', 'message' => 'Data saved successfully');
echo json_encode($response);
}
<script type="text/javascript">
function saveData() {
var name = $('#name').val();
var email = $('#email').val();
$.ajax({
url: '<?php echo site_url("ajaxexample/save_data"); ?>', // Controller URL
type: 'POST',
data: { name: name, email: email },
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
alert(response.message);
}
},
error: function() {
alert('Error saving data');
}
});
}
</script>
<input type="text" id="name" placeholder="Enter Name">
<input type="text" id="email" placeholder="Enter Email">
<button onclick="saveData()">Save Data</button>
CodeIgniter-এ AJAX এবং JSON ব্যবহার করে ডেটা প্রসেস করার মাধ্যমে ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্স বৃদ্ধি করা যায়। এটি রিয়েল-টাইম ডেটা আপডেট, অ্যাসিনক্রোনাস ডেটা প্রক্রিয়াকরণ, এবং স্বতঃস্ফূর্ত ইন্টারঅ্যাকশন সহজ করে তোলে।
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
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
