AJAX (Asynchronous JavaScript and XML) হল একটি টেকনোলজি যা ওয়েব পেজে অ্যাসিঙ্ক্রোনাস (অর্থাৎ, সার্ভারের সাথে পেজ রিলোড না করে) ডাটা ট্রান্সফার করে, যা ওয়েব অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্স উন্নত করতে সাহায্য করে। Spring MVC এর সাথে AJAX ইন্টিগ্রেট করা খুবই সহজ এবং এটি সিম্পল এবং ফাস্ট ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।
Spring MVC এবং AJAX এর ইন্টিগ্রেশন প্রধানত দুটি ধাপে সম্পন্ন হয়:
এই উদাহরণে আমরা একটি Spring MVC অ্যাপ্লিকেশন তৈরি করব, যেখানে AJAX ব্যবহার করে একটি ফর্মের মাধ্যমে ডাটা সার্ভারে পাঠানো হবে এবং সার্ভার থেকে রেসপন্স গ্রহণ করা হবে, অথচ পেজ রিলোড হবে না।
প্রথমে, Spring MVC কন্ট্রোলারে AJAX রিকোয়েস্ট গ্রহণ এবং তার রেসপন্স প্রদান করার জন্য একটি কন্ট্রোলার তৈরি করা হবে।
@Controller
public class AjaxController {
// Mapping for handling AJAX request
@RequestMapping(value = "/getUserInfo", method = RequestMethod.GET)
@ResponseBody
public User getUserInfo(@RequestParam("id") int userId) {
// Dummy user data for demonstration
User user = new User(userId, "John Doe", "john.doe@example.com");
return user; // Return user data as JSON
}
}
ব্যাখ্যা:
@RequestMapping: এই অ্যানোটেশনটি /getUserInfo URL-এ GET রিকোয়েস্ট মেপিং করে।@ResponseBody: এটি স্প্রিংকে নির্দেশ করে যে মেথডের রিটার্ন ভ্যালু সরাসরি HTTP রেসপন্সে পাঠাতে হবে, এবং JSON ফর্ম্যাটে পাঠানো হবে।@RequestParam: এটি URL প্যারামিটার থেকে userId নেয়।public class User {
private int id;
private String name;
private String email;
// Constructor
public User(int id, String name, String email) {
this.id = id;
this.name = name;
this.email = email;
}
// Getters and Setters
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
এখন, JSP ফাইল তৈরি করা হবে, যেখানে ইউজার ইন্টারফেস থাকবে এবং AJAX রিকোয়েস্ট পাঠানো হবে।
<!DOCTYPE html>
<html>
<head>
<title>Spring MVC AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function getUserInfo() {
var userId = $("#userId").val(); // Get the user id from input field
$.ajax({
url: "/getUserInfo", // URL of the Spring MVC Controller
type: "GET",
data: { id: userId }, // Passing userId as a parameter
success: function(response) {
// On success, populate the user details
$("#userName").text(response.name);
$("#userEmail").text(response.email);
},
error: function() {
alert("Error fetching user info.");
}
});
}
</script>
</head>
<body>
<h1>AJAX and Spring MVC Example</h1>
<label for="userId">Enter User ID:</label>
<input type="text" id="userId" name="userId">
<button onclick="getUserInfo()">Get User Info</button>
<h2>User Info</h2>
<p><strong>Name: </strong><span id="userName"></span></p>
<p><strong>Email: </strong><span id="userEmail"></span></p>
</body>
</html>
ব্যাখ্যা:
getUserInfo(): এটি একটি ফাংশন যা userId ইনপুট ফিল্ডের মান নিয়ে AJAX রিকোয়েস্ট পাঠায়। এর পরে রেসপন্স হিসাবে পাওয়া ইউজারের নাম এবং ইমেইল ভিউতে প্রদর্শিত হয়।DispatcherServlet কনফিগার করার জন্য web.xml ফাইলটি নিম্নরূপ হবে:
<web-app>
<!-- DispatcherServlet configuration -->
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
এখানে DispatcherServlet সব রিকোয়েস্ট গ্রহণ করে এবং সঠিক কন্ট্রোলার/ভিউ রেজল্ভ করে।
Spring MVC কনফিগারেশনে @EnableWebMvc অ্যানোটেশন ব্যবহার করা হয়:
@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.example")
public class WebConfig implements WebMvcConfigurer {
// Add your view resolvers or additional configurations if necessary
}
http://localhost:8080 অ্যাক্সেস করুন।1 বা 2) দিন এবং "Get User Info" বাটনে ক্লিক করুন।AJAX (Asynchronous JavaScript and XML) হল একটি ওয়েব প্রযুক্তি যা ওয়েব পেজের কিছু অংশকে পেজটি রিফ্রেশ না করেই সার্ভার থেকে ডেটা আদান-প্রদান করার সুযোগ দেয়। এটি ক্লায়েন্ট-সাইডে JavaScript ব্যবহার করে অ্যাসিঙ্ক্রোনাসভাবে সার্ভারের সাথে ডেটা যোগাযোগ করতে সক্ষম করে। AJAX-এর মাধ্যমে, ইউজার ইন্টারফেস আরও ইন্টারঅ্যাকটিভ এবং দ্রুত প্রতিক্রিয়া প্রদান করে, কারণ এটি শুধুমাত্র প্রয়োজনীয় ডেটা সার্ভার থেকে আনে এবং পেজ পুরোপুরি রিফ্রেশ না করেই নতুন ডেটা প্রদর্শন করে।
AJAX সাধারণত XMLHttpRequest অবজেক্ট ব্যবহার করে সার্ভারের সাথে ডেটা আদান-প্রদান করে। তবে, এখনadays JSON (JavaScript Object Notation) অনেক বেশি ব্যবহৃত হয়, কারণ এটি কমপ্যাক্ট এবং জাভাস্ক্রিপ্টের সাথে আরও ভাল ইন্টিগ্রেট হয়।
AJAX এর মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে যোগাযোগ করার জন্য সাধারণভাবে নিচের ধাপগুলো অনুসরণ করা হয়:
Spring MVC এর সাথে AJAX ব্যবহার করলে, আপনি ওয়েব অ্যাপ্লিকেশনটিকে আরও ইন্টারঅ্যাকটিভ এবং দ্রুত কাজ করার উপযোগী করতে পারেন। Spring MVC একটি শক্তিশালী ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন এবং AJAX রিকোয়েস্টগুলিকে খুবই সহজে ম্যানেজ করতে পারে।
Spring MVC তে AJAX রিকোয়েস্ট হ্যান্ডল করতে সাধারণত @RequestMapping বা @PostMapping/ @GetMapping ব্যবহৃত হয়। AJAX রিকোয়েস্ট সার্ভারে পাঠানোর পর কন্ট্রোলার রেসপন্স ফেরত পাঠিয়ে AJAX কলের মাধ্যমে ডেটা প্রক্রিয়া বা রেন্ডার করা হয়।
$(document).ready(function(){
// AJAX GET রিকোয়েস্ট
$("#myButton").click(function(){
$.ajax({
url: '/hello', // Spring MVC Controller এর URL
type: 'GET', // HTTP Method
success: function(response) {
$('#result').html(response); // সার্ভার থেকে প্রাপ্ত রেসপন্স এখানে প্রিন্ট হবে
},
error: function(error) {
console.log("Error: ", error);
}
});
});
});
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.ui.Model;
@Controller
public class MyController {
@GetMapping("/hello")
public String helloPage(Model model) {
model.addAttribute("message", "Hello, AJAX!");
return "hello"; // return the name of the view (hello.jsp or hello.html)
}
}
$.ajax() ফাংশন ব্যবহার করে /hello URL তে GET রিকোয়েস্ট পাঠানো হয়েছে।/hello URL হ্যান্ডল করবে এবং ইউজারের কাছে একটি ভিউ (যেমন hello.jsp) রিটার্ন করবে, যেখানে "Hello, AJAX!" মেসেজটি থাকবে।$(document).ready(function(){
$("#submitButton").click(function(){
var name = $("#name").val();
$.ajax({
url: '/submit', // Controller এর URL
type: 'POST', // HTTP Method
data: { username: name },
success: function(response) {
$('#result').html(response); // সার্ভার থেকে প্রাপ্ত রেসপন্স এখানে প্রিন্ট হবে
},
error: function(error) {
console.log("Error: ", error);
}
});
});
});
Spring Controller এর জন্য:
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class MyController {
@PostMapping("/submit")
public String handleForm(@RequestParam("username") String username) {
System.out.println("Received username: " + username);
return "Submission Successful"; // AJAX রেসপন্স হিসেবে মেসেজ প্রদান
}
}
এখানে:
$.ajax() ফাংশন ব্যবহার করে POST রিকোয়েস্ট পাঠানো হচ্ছে এবং username ফর্ম ইনপুট থেকে প্রাপ্ত মান সার্ভারে পাঠানো হচ্ছে।@PostMapping("/submit") এনোটেশন দিয়ে এই POST রিকোয়েস্ট হ্যান্ডল করে, তারপর সার্ভার থেকে "Submission Successful" রেসপন্স ফিরিয়ে দেয়।Spring MVC তে AJAX ব্যবহার করলে আপনি ওয়েব অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং দ্রুত প্রতিক্রিয়া সহ করতে পারেন। Spring MVC AJAX রিকোয়েস্ট হ্যান্ডলিং এবং ডেটা প্রসেসিং খুবই সহজ করে দেয়। এটি ওয়েব পেজের পারফরম্যান্স এবং ইউজার অভিজ্ঞতা উন্নত করার জন্য একটি শক্তিশালী টুল হিসেবে কাজ করে।
Spring MVC এবং jQuery Ajax এর সমন্বয়ে আপনি ডাইনামিকভাবে ওয়েব পৃষ্ঠায় ডেটা লোড করতে পারেন। Ajax (Asynchronous JavaScript and XML) একটি টেকনোলজি যা ক্লায়েন্ট এবং সার্ভারের মধ্যে অ্যাসিঙ্ক্রোনাস কমিউনিকেশন সক্ষম করে, অর্থাৎ পুরো পৃষ্ঠাটি রিফ্রেশ না করে, শুধু প্রয়োজনীয় ডেটা বা অংশ লোড করা হয়। Spring MVC এর সাথে jQuery Ajax ব্যবহার করলে আপনি ইন্টারেকটিভ এবং গতিশীল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
এখানে আমরা Spring MVC এবং jQuery Ajax এর মাধ্যমে ডেটা লোড করার একটি উদাহরণ দেখব।
প্রথমে আপনাকে একটি Spring MVC Controller তৈরি করতে হবে, যেটি Ajax রিকোয়েস্ট গ্রহণ করবে এবং ডেটা ফেরত দেবে।
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class DataController {
@GetMapping("/getData")
@ResponseBody
public String getData() {
// Here, you can fetch data from the database or process it
return "Hello from Spring MVC!";
}
}
/getData URL-এ অ্যাক্সেসের জন্য ম্যাপ করা হয়েছে।এখন আপনাকে একটি HTML পৃষ্ঠা তৈরি করতে হবে, যেখানে jQuery Ajax কল করা হবে এবং ডেটা লোড করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring MVC and jQuery Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Spring MVC and jQuery Ajax</h1>
<button id="loadDataBtn">Load Data</button>
<div id="result"></div>
<script>
$(document).ready(function() {
// When the button is clicked
$('#loadDataBtn').click(function() {
// Perform an AJAX GET request
$.ajax({
url: '/getData', // URL of the Spring MVC controller method
type: 'GET',
success: function(data) {
// On success, append the data to the div with id 'result'
$('#result').html(data);
},
error: function() {
// Handle error
$('#result').html('Error loading data.');
}
});
});
});
</script>
</body>
</html>
ব্যাখ্যা:
/getData URL-এ ডেটা প্রেরণ করবে।Spring MVC এ Ajax কল করার জন্য কোন বিশেষ কনফিগারেশন সাধারণত প্রয়োজন হয় না, যদি আপনার অ্যাপ্লিকেশন Spring Boot এর সাথে কাজ করে। তবে, যদি আপনি XML ভিত্তিক কনফিগারেশন ব্যবহার করেন, তবে DispatcherServlet এবং অন্যান্য কনফিগারেশন নিশ্চিত করতে হবে।
web.xml Example (Spring MVC configuration):
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
mvn spring-boot:run বা IDE এর মাধ্যমে রান করুন।http://localhost:8080).Spring MVC এবং jQuery Ajax এর মাধ্যমে ডেটা লোড করা একটি সহজ এবং কার্যকর উপায় ওয়েব অ্যাপ্লিকেশনগুলিতে ডাইনামিক ডেটা ফেচিং এবং রিফ্রেশের জন্য। Spring MVC কন্ট্রোলার ক্লাস থেকে ডেটা ফেরত দিয়ে এবং jQuery Ajax ব্যবহার করে সেই ডেটা ওয়েব পৃষ্ঠায় প্রদর্শন করা হয়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং সার্ভারের উপর লোড কমায়।
Spring MVC তে JSON Response প্রদান এবং Ajax কলের মাধ্যমে ডেটা প্রেরণ একটি খুব সাধারণ এবং গুরুত্বপূর্ণ কার্যক্রম, বিশেষত single-page applications (SPA) বা dynamic web pages তৈরি করতে হলে। Spring MVC সহজে JSON রেসপন্স দিতে সক্ষম এবং Ajax কলের মাধ্যমে ক্লায়েন্ট থেকে সার্ভারে ডেটা পাঠাতে এবং প্রাপ্ত ডেটা ব্যবহার করে ইউজার ইন্টারফেস আপডেট করতে সহায়তা করে।
Spring MVC তে JSON রেসপন্স প্রদান করতে @RestController বা @ResponseBody অ্যানোটেশন ব্যবহার করা হয়। এই অ্যানোটেশনগুলি Spring MVC কন্ট্রোলার মেথডের রিটার্ন ভ্যালুকে JSON হিসেবে কনভার্ট করে রেসপন্স প্রদান করে।
@RestController এবং @ResponseBody এর ব্যবহারের উদাহরণ:@RestController ক্লাসটি @Controller এবং @ResponseBody এর সমন্বয়। এটি প্রতিটি মেথডের রিটার্ন ভ্যালুকে JSON বা XML হিসাবে রেন্ডার করে।
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@GetMapping("/user")
public User getUser() {
// ডেটাবেস থেকে ইউজার ডেটা এনে একটি User অবজেক্ট তৈরি করুন
User user = new User(1, "John Doe", "john.doe@example.com");
return user; // এই ইউজার অবজেক্টটি JSON রেসপন্স হিসেবে রিটার্ন হবে
}
}
User POJO:
public class User {
private int id;
private String name;
private String email;
// Constructor, Getters, Setters
public User(int id, String name, String email) {
this.id = id;
this.name = name;
this.email = email;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
এখানে:
@RestController: এটি Spring MVC এর কন্ট্রোলার এবং রেসপন্স বডি হিসাবে JSON ডেটা রিটার্ন করবে।@GetMapping("/user"): /user URL এর জন্য একটি HTTP GET রিকোয়েস্ট মেপিং।এই কন্ট্রোলারটি /user রিকোয়েস্টের জন্য একটি User অবজেক্ট JSON হিসেবে রিটার্ন করবে, যা এই রকম হবে:
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
}
Ajax (Asynchronous JavaScript and XML) হল একটি টেকনোলজি যা ব্রাউজারের মধ্যে ডেটা সিঙ্ক্রোনাইজ না করেই সার্ভারে পাঠাতে এবং রিসিভ করতে ব্যবহৃত হয়। Spring MVC এর সাথে Ajax ব্যবহার করে ডেটা প্রেরণ এবং গ্রহণ করা সহজ।
এখানে আমরা jQuery ব্যবহার করে Ajax কলের মাধ্যমে ডেটা প্রেরণ এবং রেসপন্স গ্রহণ করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spring MVC with Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Get User Data</h2>
<button id="getUserBtn">Get User</button>
<div id="userData"></div>
<script>
$(document).ready(function() {
$('#getUserBtn').click(function() {
$.ajax({
url: '/user', // Ajax কলটি '/user' URL এ যাবে
type: 'GET', // GET রিকোয়েস্ট
dataType: 'json', // রেসপন্স JSON হিসেবে আশা করছি
success: function(response) {
// JSON রেসপন্স প্রসেস করা
$('#userData').html('User ID: ' + response.id + '<br>' +
'Name: ' + response.name + '<br>' +
'Email: ' + response.email);
},
error: function(xhr, status, error) {
// যদি কোনো ত্রুটি হয়
$('#userData').html('Error: ' + error);
}
});
});
});
</script>
</body>
</html>
এখানে:
$.ajax() ব্যবহার করা হয়েছে /user রিকোয়েস্ট করার জন্য।type: 'GET' এবং dataType: 'json' সেটিংয়ের মাধ্যমে JSON রেসপন্স আশা করা হচ্ছে।success Callback: সার্ভার থেকে সঠিক JSON রেসপন্স পাওয়ার পর, আমরা সেই ডেটা UI তে দেখাচ্ছি।এখানে, আমরা Spring MVC কন্ট্রোলার ব্যবহার করে JSON ডেটা সার্ভারে পাঠাবো এবং সার্ভার থেকে প্রাপ্ত রেসপন্স রিটার্ন করবো।
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class UserController {
@PostMapping("/addUser")
public User addUser(@RequestBody User user) {
// এখানে, user ডেটা JSON হিসেবে পাঠানো হবে
System.out.println("Received User: " + user.getName());
return user; // সার্ভারে প্রাপ্ত ইউজার অবজেক্ট রিটার্ন করব
}
}
এখানে:
@PostMapping("/addUser"): HTTP POST রিকোয়েস্ট হ্যান্ডল করার জন্য।@RequestBody: HTTP রিকোয়েস্ট বডি থেকে JSON ডেটা গ্রহণ করার জন্য।<button id="addUserBtn">Add User</button>
<script>
$(document).ready(function() {
$('#addUserBtn').click(function() {
var user = {
"id": 2,
"name": "Jane Doe",
"email": "jane.doe@example.com"
};
$.ajax({
url: '/addUser', // সার্ভারে রিকোয়েস্ট পাঠানোর URL
type: 'POST',
contentType: 'application/json', // JSON ডেটা প্রেরণ
dataType: 'json',
data: JSON.stringify(user), // ইউজারের ডেটা JSON হিসেবে পাঠানো হচ্ছে
success: function(response) {
$('#userData').html('User added: ' + response.name);
},
error: function(xhr, status, error) {
$('#userData').html('Error: ' + error);
}
});
});
});
</script>
এখানে:
data: JSON.stringify(user): Ajax কলের মাধ্যমে ইউজার ডেটা JSON হিসেবে সার্ভারে পাঠানো হচ্ছে।contentType: 'application/json': এটি সার্ভারে JSON ডেটা প্রেরণের জন্য Content-Type সেট করে।Spring MVC তে JSON Response প্রদান এবং Ajax কলের মাধ্যমে ডেটা প্রেরণ এবং গ্রহণ একটি সহজ এবং কার্যকর পদ্ধতি। এটি ক্লায়েন্ট-সার্ভার যোগাযোগে দ্রুত এবং ডাইনামিক ডেটা ট্রান্সফার নিশ্চিত করে, যা বিশেষ করে Single-Page Applications (SPA) এবং dynamic web pages এর জন্য অপরিহার্য। Spring MVC তে @RestController এবং Ajax এর সংমিশ্রণ দিয়ে আপনি একটি দক্ষ এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন।
AJAX (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পেজের অংশবিশেষ সার্ভারের সাথে যোগাযোগ করে এবং পুরো পেজটি রিলোড না করেই রেসপন্স প্রাপ্ত করে। এটি ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত এবং ইন্টারঅ্যাকটিভ বানাতে সাহায্য করে। Spring MVC-এর সাথে AJAX ইন্টিগ্রেশন সাধারণত JSON ফরম্যাটে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়।
Spring MVC-তে AJAX ইন্টিগ্রেশন করার জন্য আমরা সাধারণত JavaScript (AJAX calls) এবং Spring Controller ব্যবহার করে AJAX রিকোয়েস্ট এবং রেসপন্স পরিচালনা করি। এখানে একটি উদাহরণ দেওয়া হচ্ছে যেখানে AJAX এবং Spring MVC একত্রে কাজ করবে।
Spring MVC এবং AJAX ইন্টিগ্রেশনের জন্য আপনাকে Spring Web ডিপেনডেন্সি ব্যবহার করতে হবে, যা Spring Boot প্রজেক্টের জন্য সাধারণত ডিফল্টভাবে থাকে। যদি এটি না থাকে তবে pom.xml-এ এই ডিপেনডেন্সি যোগ করতে হবে:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Spring MVC কন্ট্রোলারে AJAX রিকোয়েস্ট প্রক্রিয়া করতে একটি মেথড তৈরি করতে হবে, যা JSON ডেটা ফেরত দেবে। এই উদাহরণে, আমরা @ResponseBody অ্যানোটেশন ব্যবহার করব যাতে Spring MVC রিকোয়েস্টের রেসপন্স JSON ফরম্যাটে ফেরত দিতে পারে।
AjaxController.java:
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
@GetMapping("/ajax")
public String processAjaxRequest(@RequestParam("name") String name) {
return "Hello, " + name + "!";
}
}
এখানে, /ajax URL পাথের জন্য AJAX রিকোয়েস্ট গ্রহণ করা হচ্ছে এবং name প্যারামিটারটি গ্রহণ করে একটি কাস্টম মেসেজ রিটার্ন করা হচ্ছে।
এখানে আমরা Thymeleaf ব্যবহার করছি, তবে আপনি অন্য ভিউ টেমপ্লেট সিস্টেমও ব্যবহার করতে পারেন। AJAX রিকোয়েস্টটি jQuery ব্যবহার করে করা হবে।
ajax-example.html (Thymeleaf + jQuery):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>AJAX Example with Spring MVC</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Spring MVC and AJAX Example</h2>
<form id="nameForm">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
<div id="responseMessage"></div>
<script type="text/javascript">
// Ajax call when form is submitted
$("#nameForm").submit(function(event) {
event.preventDefault(); // Prevent the default form submission
var name = $("#name").val(); // Get the value of the input field
$.ajax({
url: "/ajax", // The URL for the Spring MVC controller method
type: "GET", // The type of request (GET)
data: { name: name }, // Data to be sent to the controller
success: function(response) {
// On successful response, display it in the 'responseMessage' div
$("#responseMessage").html(response);
},
error: function() {
// Handle error scenario
$("#responseMessage").html("An error occurred.");
}
});
});
</script>
</body>
</html>
$.ajax() ফাংশনটি /ajax URL-এ GET রিকোয়েস্ট পাঠায় এবং name প্যারামিটার সহ তথ্য প্রেরণ করে।#responseMessage div-এ প্রদর্শিত হয়।Spring Boot অ্যাপ্লিকেশন চালানোর পর:
@ResponseBody for JSON ResponsesSpring MVC তে AJAX রিকোয়েস্টের জন্য JSON রেসপন্স ফেরত দিতে আপনি @ResponseBody ব্যবহার করতে পারেন। এটি কন্ট্রোলার মেথডের রিটার্ন ভ্যালুকে JSON ফরম্যাটে রেন্ডার করে দেয়।
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class AjaxController {
@GetMapping("/ajax")
public @ResponseBody String processAjaxRequest(@RequestParam("name") String name) {
return "{ \"message\": \"Hello, " + name + "!\" }"; // Returning JSON response
}
}
এখানে, JSON রেসপন্স ব্যবহারের মাধ্যমে, আপনি ফ্রন্টএন্ডে JSON ডেটা পাচ্ছেন এবং তাকে প্রোগ্রামেটিকভাবে প্রসেস করতে পারবেন।
যদি কোনও ত্রুটি ঘটে (যেমন সার্ভার অ্যাক্সেস না পাওয়া), তখন আপনি error ফাংশন ব্যবহার করে ইউজারকে একটি ত্রুটি বার্তা প্রদর্শন করতে পারেন।
error: function(xhr, status, error) {
console.log("Error: " + error);
$("#responseMessage").html("An error occurred. Please try again.");
}
এই ফাংশনটি ত্রুটির অবস্থা অনুযায়ী xhr, status, এবং error প্যারামিটার ধারণ করে এবং আপনি ত্রুটির বার্তা ব্রাউজারে দেখতে পারবেন।
AJAX Integration with Spring MVC is a powerful way to create asynchronous web applications that provide a smooth user experience without the need to reload the entire page. By using jQuery for sending requests and Spring MVC controllers for processing them, you can easily implement AJAX functionality. The combination of AJAX and Spring MVC provides an efficient way to handle requests, process data, and update the view dynamically.
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
