Spring Mvc With Jquery Ajax Example

jQuery Ajax

In JSP, create a simple search form and send the form request with jQuery
$.ajax
.

<%@page session="false"%> <%@taglib prefix="spring" uri="http://www.springframework.org/tags"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
Spring 4 MVC Ajax Hello World Search Form Username Email © Mkyong.com 2015

You just add new Person

” + “Name: ” + data.name + “
” + “Age: ” + data.age; $(“#ajax-response”).html(result); }, error : function(e) { console.log(“ERROR: “, e); } }); } function searchViaAjax() { var name = $(“#query”).val(); $.ajax({ type : “GET”, contentType : “application/json”, url : “${home}home/search/”, data : { name : name }, dataType : ‘json’, timeout : 100000, success : function(data) { console.log(“SUCCESS: “, data); if (data != null) { var result = ”

How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot | Java Techie

spring mvc jquery ajax example

Spring MVC (Spring Model-View-Controller) là một framework Java phổ biến được sử dụng để phát triển ứng dụng web. Nó cung cấp một cách tiếp cận dễ dùng và linh hoạt để xây dựng các ứng dụng web sử dụng mô hình MVC.

Trong bài viết này, chúng ta sẽ tìm hiểu và thực hiện một ví dụ về Spring MVC jQuery Ajax để hiểu rõ hơn về cách kết hợp ba công nghệ này và xây dựng một ứng dụng web động.

1. Thiết lập môi trường phát triển

Trước tiên, chúng ta cần thiết lập môi trường phát triển bằng cách cài đặt JDK và một IDE như Eclipse hoặc IntelliJ IDEA. Sau đó, ta tạo một dự án Spring MVC bằng cách sử dụng các công cụ hỗ trợ.

2. Thêm các thư viện cần thiết

Sau khi tạo dự án Spring MVC thành công, chúng ta cần thêm các thư viện cần thiết cho việc sử dụng Spring MVC và jQuery. Thư viện Spring MVC giúp chúng ta xây dựng các thành phần của ứng dụng web, trong khi thư viện jQuery cho phép chúng ta làm việc với Ajax dễ dàng hơn.

3. Tạo Controller Spring MVC

Tiếp theo, chúng ta tạo một Controller trong Spring MVC để xử lý yêu cầu từ client. Controller sẽ xác định các phương thức xử lý yêu cầu và có thể được đánh dấu bằng @Controller.

4. Tạo view trong Spring MVC

Sau khi xác định các phương thức xử lý yêu cầu, chúng ta cần tạo các view để hiển thị giao diện cho người dùng. Trong Spring MVC, chúng ta có thể sử dụng JSP (JavaServer Pages) hoặc các công cụ như Thymeleaf hoặc Freemarker để tạo view.

5. Xử lý yêu cầu Ajax bằng jQuery

Để xử lý yêu cầu Ajax từ client, chúng ta cần sử dụng jQuery. Đầu tiên, tạo một file JavaScript và sử dụng phương thức $.ajax để gửi yêu cầu Ajax đến server. Sau đó, chúng ta xử lý kết quả trả về từ server.

6. Gửi yêu cầu Ajax từ client đến server

Khi gửi yêu cầu Ajax, chúng ta có thể binding dữ liệu từ form hoặc các trường input khác trong trang web. Sau đó, chúng ta sử dụng phương thức POST hoặc GET để gửi yêu cầu Ajax đến server.

7. Xử lý yêu cầu Ajax trên server

Sau khi nhận yêu cầu Ajax từ client, chúng ta cần xử lý yêu cầu trong Spring MVC controller. Controller sẽ xử lý yêu cầu và trả về kết quả dưới dạng JSON hoặc XML.

8. Cập nhật giao diện khi nhận kết quả Ajax

Cuối cùng, chúng ta sử dụng jQuery để cập nhật giao diện trong trang web sau khi nhận kết quả từ server. Chúng ta có thể hiển thị dữ liệu trả về từ server trong trang web một cách linh hoạt và tương tác với người dùng.

FAQs:

1. Tại sao chúng ta cần sử dụng Spring MVC?– Spring MVC cung cấp một kiến trúc rõ ràng và mô hình MVC, giúp tái sử dụng mã nguồn dễ dàng và tạo ra các ứng dụng web linh hoạt và bảo mật.

2. Có những thư viện jQuery nào hỗ trợ Ajax?– jQuery cung cấp các phương thức như $.ajax, $.get, và $.post để gửi yêu cầu Ajax đến server và xử lý kết quả trả về.

3. Tại sao chúng ta sử dụng JSON hoặc XML để truyền dữ liệu qua Ajax?– JSON và XML là định dạng thông dụng để truyền dữ liệu qua Ajax vì chúng hỗ trợ cấu trúc dữ liệu linh hoạt và dễ đọc.

4. Làm thế nào để xử lý lỗi khi gửi yêu cầu Ajax?– Trong jQuery, chúng ta có thể sử dụng phương thức $.ajaxError hoặc xử lý các trường hợp lỗi trong phương thức xử lý yêu cầu từ server.

5. Có cách nào khác để cập nhật giao diện trang web sau khi nhận kết quả từ server?– Ngoài việc sử dụng jQuery, chúng ta cũng có thể sử dụng các công nghệ khác như AngularJS hoặc React để cập nhật giao diện trang web một cách linh hoạt và hiệu quả.

Trên đây là một ví dụ về Spring MVC jQuery Ajax để hiểu rõ hơn về cách kết hợp ba công nghệ này và xây dựng một ứng dụng web động. Việc sử dụng Spring MVC và jQuery Ajax giúp chúng ta phát triển các ứng dụng web hiệu quả và tốt hơn. Chúc bạn thành công!

Từ khoá người dùng tìm kiếm: spring mvc jquery ajax example

Chuyên mục: Top 92 spring mvc jquery ajax example

Spring 4 MVC Ajax JQuery Example – Spring MVC Tutorial for beginners

How to get data using Ajax in jQuery in MVC?

Trong các ứng dụng web hiện đại, việc tải dữ liệu mà không làm tải lại trang web đang trở thành xu hướng phổ biến. Ajax là một kỹ thuật mạnh mẽ cho phép chúng ta thao tác dữ liệu bất đồng bộ trong các ứng dụng web. Trong kịch bản này, chúng tôi sẽ tìm hiểu cách lấy dữ liệu bằng Ajax trong jQuery trong mô hình MVC.

1. Đầu tiên, hãy xác định cấu trúc dự án của chúng ta. Trong mô hình MVC, chúng ta có ba phần quan trọng: mô hình (model), giao diện người dùng (view) và điều khiển (controller).

– Mô hình (model): Đây là nơi chúng ta định nghĩa các lớp và phương thức để truy xuất dữ liệu từ nguồn dữ liệu (ví dụ: cơ sở dữ liệu).– Giao diện người dùng (view): Đây là phần giao diện mà người dùng sẽ nhìn thấy và tương tác. Nó có thể là các trang web, form đăng nhập hoặc các thành phần tương tác như nút bấm và cửa sổ pop-up.– Điều khiển (controller): Đây là nơi chúng ta xử lý các yêu cầu từ người dùng và tương tác với mô hình và giao diện người dùng.

2. Tiếp theo, chúng ta cần chắc chắn rằng chúng ta đã bao gói jQuery trong dự án của mình. Điều này giúp chúng ta thao tác với các phần tử DOM một cách dễ dàng hơn và xử lý Ajax một cách thuận tiện. Sử dụng thẻ

[Bài đọc] JQuery Ajax và kiến thức cơ bản

AJAX – “Asynchronous JavaScript and XML” – là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.

jQuery cung cấp method $.ajax và một số methods tiện lợi giúp bạn làm việc với XHRs thông qua trình duyệt một cách dễ dàng hơn.

1. Phương thức load()

Cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] );

Trong đó:

URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script…

Data − là tham số tùy ý, biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới yêu cầu (Request). Nếu được xác định, Request được tạo sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.

Callback − Một hàm callback được gọi sau khi dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối, tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái

The jQuery Example 
src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

Click on the button to load /jquery/result.html file −

STAGE

Ở đây load() khởi tạo một Ajax request tới URL là file “result.html” .Sau khi tải tệp này, tất cả nội dung sẽ được điền vào bên trong

được gắn thẻ với giai đoạn ID. Giả sử, tệp /jquery/result.html của chúng tôi chỉ có một dòng HTML

2. Phương thức getJSON()

Cú pháp

[selector].getJSON( URL, [data], [callback] );

Trong đó:

URL – URL của tài nguyên phía máy chủ được liên hệ qua phương thức GET

DATA – Một đối tượng có các thuộc tính đóng vai trò là cặp key/value được sử dụng để xây dựng chuỗi truy vấn được thêm vào URL hoặc chuỗi truy vấn được định dạng sẵn và được mã hóa

Callback – Một chức năng được gọi khi yêu cầu hoàn thành. Giá trị dữ liệu phản hồi dưới dạng chuỗi JSON được truyền dưới dạng tham số đầu tiên của request và tham số thứ hai là trạng thái.

Live Demo

 The jQuery Example 
src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

Click on the button to load result.json file −

STAGE

Ở đây, phương thức tiện ích JQuery getJSON () khởi tạo một yêu cầu Ajax đến tệp URL result.json được chỉ định. Sau khi tải tệp này, tất cả nội dung sẽ được chuyển đến chức năng gọi lại, cuối cùng sẽ được đưa vào bên trong

được gắn thẻ với giai đoạn ID

3. Phương thức get(), post()

Cú pháp

$.get( url, [data], [callback], [type] )

$.post( url, [data], [callback], [type] )

Trong đó:

URL – Là chuỗi chưa URL để gửi request

Data – Tham số tùy chọn đại diện cho các cặp key/value sẽ được gửi đến máy chủ

Callback – Là một chức năng được gọi khi yêu cầu hoàn thành

Type – Tham số tùy chọn này đại diện cho loại dữ liệu được trả về cho hàm gọi lại: “xml”, “html”, “script”, “json”, “jsonp” hoặc “text”.

The jQuery Example 
src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

Click on the button to load result.html file −

STAGE

value = “Load Data” />

The jQuery Example 
src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

Click on the button to load result.html file −

STAGE

4. Phương thức ajax()

Cú pháp

jQuery.ajax( options )

Trong đó:

Options: Là một tập hợp các cặp key/value cấu hình yêu cầu Ajax

The jQuery Example 
src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>

Click on the button to load result.html file:

STAGE

Create Spring MVC Project

On the Eclipse, create a Spring MVC project in Spring Boot

Enter Project Information:

Name: LearnSpringMVCWithRealApps
Group: com.demo
Artifact: LearnSpringMVCWithRealApps
Description: Learn Spring MVC with Real Apps
Package: com.demo

Select the technologies and libraries to be used:

Click Next button to show Site Information for project

Click Finish button to finish create Spring MVC project

Configure pom.xml

4.0.0 com.demo LearnSpringMVCWithRealApps 0.0.1-SNAPSHOT jar LearnSpringMVCWithRealApps Learn Spring MVC with Real Apps org.springframework.boot spring-boot-starter-parent 1.5.2.RELEASE UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-web javax.servlet.jsp.jstl javax.servlet.jsp.jstl-api 1.2.1 taglibs standard 1.1.2 org.apache.tomcat.embed tomcat-embed-jasper provided org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin

Configure application.properties

spring.mvc.view.prefix = /WEB-INF/views/ spring.mvc.view.suffix = .jsp spring.mvc.static-path-pattern=/resources/** server.port=9596

Create Resources

JQuery

Create new folder named js in src\main\resources\static folder. Copy jquery file to this folder

Entities Class

Create new package, named com.demo.entities. In this package, create entities class as below:

Product Entity

Create new java class, named Product.java

package com.demo.entities; import java.io.Serializable; public class Product implements Serializable { private String id; private String name; private double price; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } public Product(String id, String name, double price) { this.id = id; this.name = name; this.price = price; } public Product() { } }

Models Class

Create new package, named com.demo.models. In this package, create ProductModel class as below:

package com.demo.models; import java.util.ArrayList; import java.util.List; import com.demo.entities.Product; public class ProductModel { public Product find() { return new Product("p01", "name 1", 20); } public List findAll() { List products = new ArrayList (); products.add(new Product("p01", "name 1", 20)); products.add(new Product("p02", "name 2", 21)); products.add(new Product("p03", "name 3", 22)); return products; } }

Create Controllers

Create new package named com.demo.controllers. In this package, create controllers as below:

DemoController

Create new java class, named DemoController.java

package com.demo.controllers; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; @Controller @RequestMapping("demo") public class DemoController { @RequestMapping(method = RequestMethod.GET) public String index() { return "demo/index"; } }

Create Rest API Controllers

In com.demo.controllers package, create new Spring Rest API controller give data for ajax as below:

AjaxRestController

Create new java class, named AjaxRestController.java as below:

package com.demo.controllers; import java.util.List; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.util.MimeTypeUtils; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import com.demo.entities.Product; import com.demo.models.ProductModel; @RestController @RequestMapping("api/ajaxrest") public class AjaxRestController { @RequestMapping(value = "demo1", method = RequestMethod.GET, produces = { MimeTypeUtils.TEXT_PLAIN_VALUE }) public ResponseEntity demo1() { try { ResponseEntity responseEntity = new ResponseEntity ("Demo 1", HttpStatus.OK); return responseEntity; } catch (Exception e) { return new ResponseEntity (HttpStatus.BAD_REQUEST); } } @RequestMapping(value = "demo2/{fullName}", method = RequestMethod.GET, produces = { MimeTypeUtils.TEXT_PLAIN_VALUE }) public ResponseEntity demo2(@PathVariable("fullName") String fullName) { try { ResponseEntity responseEntity = new ResponseEntity ("Hi " + fullName, HttpStatus.OK); return responseEntity; } catch (Exception e) { return new ResponseEntity (HttpStatus.BAD_REQUEST); } } @RequestMapping(value = "demo3", method = RequestMethod.GET, produces = { MimeTypeUtils.APPLICATION_JSON_VALUE }) public ResponseEntity demo3() { try { ProductModel productModel = new ProductModel(); ResponseEntity responseEntity = new ResponseEntity (productModel.find(), HttpStatus.OK); return responseEntity; } catch (Exception e) { return new ResponseEntity (HttpStatus.BAD_REQUEST); } } @RequestMapping(value = "demo4", method = RequestMethod.GET, produces = { MimeTypeUtils.APPLICATION_JSON_VALUE }) public ResponseEntity > demo4() { try { ProductModel productModel = new ProductModel(); ResponseEntity > responseEntity = new ResponseEntity >(productModel.findAll(), HttpStatus.OK); return responseEntity; } catch (Exception e) { return new ResponseEntity >(HttpStatus.BAD_REQUEST); } } }

Create Views

Create new folders with path webapp\WEB-INF\views in src\main. In views folder, create JSP Pages as below:

Demo View

Create new folder named demo. Create new jsp file named index.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
 Ajax in Spring MVC Demo 1 Demo 2 Full Name Demo 3 Demo 4

Structure of Spring MVC Project

Run Application

Select LearnSpringMVCWithRealAppsApplication.java file in com.demo package, right click and select Run As/Spring Boot App menu

Access index method in demo controller with following url: http://localhost:9596/demo

Output

Click Demo 1 button to call Demo1 method in AjaxRestController controller with ajax

Output

Click Demo 2 button to call Demo2 method in AjaxRestController controller with ajax

Output

Click Demo 3 button to call Demo3 method in AjaxRestController controller with ajax

Output

Click Demo 4 button to call Demo4 method in AjaxRestController controller with ajax

Output

References

I recommend you refer to the books below to learn more about the knowledge in this article:

Spring MVC Beginners Guide – Second Edition
Spring MVC Cookbook
Spring MVC Blueprints
Building RESTful Web Services with Spring 5 – Second Edition: Leverage the power of Spring 5.0, Java SE 9, and Spring Boot 2.0
Spring Boot in Action
Pro Spring Boot
jQuery in Action
JavaScript & jQuery: The Missing Manual
Murach’s JavaScript and jQuery (3rd Edition)

jQuery – Ajax GET request with Java Spring MVC controller

1 points

In this article, we’re going to have a look at how to make make AJAX GET request with jQuery.

Note: scroll to See also section to see other variants of AJAX requests.

Spring MVC AJAX Hello World Example – Kiến thức cơ bản HTTP và AJAX

Bài đăng này đã không được cập nhật trong 2 năm

Khi tìm hiểu về giao thức HTTP mình có đọc 1 số bài hướng dẫn trả lời phỏng vấn về giao thức HTTP như:
Phương thức POST bảo mật hơn GET vì dữ liệu được gửi ngầm bằng mắt thường không thể nhìn thấy được
Phương thức GET luôn luôn nhanh hơn POST vì dữ liệu gửi đi được Browser giữ lại trong cache
Phương thức GET dữ liệu được gửi tường minh, chúng ta có thể thấy trên URL nên nó không bảo mật.
Các câu trả lời ở bên trên chưa chính xác là do bạn chưa hiểu đúng về giao thức HTTP

**Trong bài hướng dẫn này mình sẽ nói đến các vấn đề sau**

1) Các khái niệm cơ bản về giao thức HTTP (GET, POST)

2) Tạo 1 web application sử dụng Spring MVC với AJAX

Giao thức HTTP( Hyper Text Transfer Protocol) là gì ? HTTP là giao thức quy ước chung để cho 2 đối tượng A và B có thể giao thông ( giao tiếp ) với nhau. Cụ thể là giao tiếp với nhau bằng 1 định dạng sử dụng chữ (text)

Ta đã biết phép căn bản của phần mềm là 2 phép đọc (read) và ghi (write) dữ liệu (Phần mềm viết ra là để xử lý dữ liệu) – phép ghi còn tách ra làm 3 phép thêm, sửa, xóa. Khi người ta thiết kế ra giao thức HTTP cũng xoay quanh các phép căn bản này của phần mềm. Từ 4 phép căn bản này sẽ tạo ra 7 HTTP method:

4 phép đại diện cho đọc (read):

GET
Trace: đọc lỗi
Option
Head: đọc phần header

3 phép đại diện cho ghi (write):

PUT
POST
DELETE

Nhưng trong quá trình làm việc chúng ta gần như chỉ sử dụng 1 phép đại diện cho đọc là GET, 1 phép đại diện cho ghi là POST. Từ đây dẫn đến sự khác nhau giữa GET và POST:

Ví dụ A muốn gửi 1 thông điệp (message) rằng A muốn đọc dữ liệu (GET) của B, như vậy A không cần mang dữ liệu lên B. Nhưng khi A muốn gửi (POST) 1 bức ảnh đến B, A phải mang dữ liệu lên B. Như vậy GET đại diện cho phép đọc sẽ không có phần body mà chỉ có header, còn POST đại diện cho phép ghi sẽ có phần body (đưa dữ liệu vào body)
Sự khác nhau giữa cấu trúc của GET và POST sẽ ảnh hưởng đến điểm mạnh điểm yếu của POST và GET.

GET sẽ
nhanh
hơn POST: GET sẽ đi nhanh hơn POST trong môi trường mạng vì nó k có body. Phần server khi xử lý message này sẽ nhanh hơn vì GET chỉ có header (khi nói đến
nhanh
ta phải nhắc đến 2 khía cạnh: traffic và performance)
Điểm mạnh của POST là đưa được data lên. Nếu muốn đưa 1 đoạn video, 1 bức ảnh GET sẽ k thể nào làm được => Nhưng vì GET đi nhanh hơn nên người ta có xu hướng dùng GET nhiều hơn, thế nên những dữ liệu mà mang lên server đủ nhỏ thì người ta có thể chuyển dữ liệu theo đường GET
GET và POST đều có tính bảo mật như nhau, vì đối với GET ta có thể sử dụng kỹ thuật ajax để parametter k hiển thị lên trên url

**Tạo 1 project sử dụng Spring MVC + Ajax bằng maven, server chạy bằng jetty **

Ajax là gì ? Ajax là một khái niệm có thể mới lạ với những bạn newbie mới học lập trình web nên đôi lúc các bạn nghĩ nó là một ngôn ngữ lập trình mới. Nhưng thực tế không như vậy, ajax là một kỹ thuật viết tắt của chữ AJAX = Asynchronous JavaScript and XML, đây là một công nghệ giúp chung ta tạo ra những Web động mà hoàn toàn không reload lại trang nên rất mượt và đẹp. Đối với công nghệ web hiện nay thì ajax không thể thiếu, nó là một phần làm nên sự sinh động cho website

Các công nghệ sẽ sử dụng trong phần hg dẫn này:

Spring 4.2.2.RELEASE
Jackson 2.6.3
Logback 1.1.3
jQuery 1.10.2
Maven 3
JDK 1.8
Tomcat 8 or Jetty 9
Eclipse 4.5
Boostrap 3

**Cấu trúc project **

**1)Project dependency: **

4.0.0 com.viblo viblo-spring-learn-ajax war 1.0-SNAPSHOT viblo-spring-learn-ajax Maven Webapp http://maven.apache.org 1.8 4.2.2.RELEASE 2.6.3 1.1.3 1.7.12 1.2 3.1.0 org.springframework spring-webmvc ${spring.version} commons-logging commons-logging com.fasterxml.jackson.core jackson-core ${jackson.version} com.fasterxml.jackson.core jackson-databind ${jackson.version} javax.servlet jstl ${jstl.version} org.slf4j jcl-over-slf4j ${jcl.slf4j.version} ch.qos.logback logback-classic ${logback.version} javax.servlet javax.servlet-api ${servletapi.version} provided viblo-spring-learn-ajax org.apache.maven.plugins maven-surefire-plugin 2.12.4 true -Xmx2524m org.apache.maven.plugins maven-compiler-plugin 3.1 1.8 1.8 UTF-8 true -XDignore.symbol.file org.eclipse.jetty jetty-maven-plugin 9.3.0.M1 -Xmx2048m -Xms1536m -XX:PermSize=128m -XX:MaxPermSize=512m manual lib ${basedir}/target/viblo-spring-learn-ajax/WEB-INF/lib 8080 60000 ${basedir}/src/main/webapp ${basedir}/src/main/webapp/WEB-INF/web.xml ${basedir}/target/classes

2)AjaxController AjaxController sẽ xử lý các ajax request từ phía client như thêm, hoặc tìm kiếm ! Sau đó trả về kết quả dưới dạng json cho client.

@Controller @RequestMapping("/home") public class AjaxController { private List listPerson = new ArrayList (); @RequestMapping(method = RequestMethod.GET) public ModelAndView home() { ModelAndView mv = new ModelAndView("web.home"); return mv; } @RequestMapping(value = "/addnew", method = RequestMethod.GET) public @ResponseBody String addNew(HttpServletRequest request) { String name = request.getParameter("name"); String age = request.getParameter("age"); Person person = new Person(name, Integer.parseInt(age)); listPerson.add(person); ObjectMapper mapper = new ObjectMapper(); String ajaxResponse = ""; try { ajaxResponse = mapper.writeValueAsString(person); } catch (JsonProcessingException e) { e.printStackTrace(); } return ajaxResponse; } @RequestMapping(value = "/search", method = RequestMethod.GET) public @ResponseBody String searchPerson(HttpServletRequest request) { String query = request.getParameter("name"); Person person = searchPersonByName(query); ObjectMapper mapper = new ObjectMapper(); String ajaxResponse = ""; try { ajaxResponse = mapper.writeValueAsString(person); } catch (JsonProcessingException e) { e.printStackTrace(); } return ajaxResponse; } public Person searchPersonByName(String query) { for (Person p : listPerson) { if (p.getName().equals(query)) { return p; } } return null; }

**3)Model Class ** Person class có nhiệm vụ đóng gói dữ liệu của người dùng nhập vào hoặc dữ liệu được trả về của server !

public class Person { private String name; private int age; public Person() { } public Person(String name, int age) { this.name=name; this.age=age; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } }

**4)Jquery Ajax **
Trong file JSP, ta tạo 2 form thêm và tìm kiếm đơn giản gửi ajax request bằng
$.ajax

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 Spring Ajax Example Viblo Add New Person Search Person by name ${message} by Crunchify.com



  Step-3

 

  Make sure you have below package structure.
 

  Step-4

 

  Open Web Browser and visit this URL: http://localhost:8080/CrunchifySpringMVCTutorial/ajax.html
 

  Another must read: https://crunchify.com/how-to-write-json-object-to-file-in-java/
 

  Step-5

 

  Checkout your Result..
 

  Step-6

 

  Let’s do some debugging. You should be able to see below debugging statements in

  

   Eclipse Console

  

  to verify that your AJAX call is working and hitting Controller…
 

  And you are all set.. Cheers.. And as usual let me know for any query..



  Spring MVC: Ajax & JQuery

 

  Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I’m going to use JQuery on a client side for sending of requests and receiving of responses. This tutorial will be based on one of my previous tutorials about Spring MVC and REST services. In this article you will read how to make a web-application more interactive with the help of asynchronous requests.
 
Using Spring MVC + MySQL + Hibernate + JSP + AJAX (CRUD) [Step By Step] PART - 3 | CodeWithNaval
 You just search Person: " + data.name + "
"; $("#ajax-response").html(result); } else { var result = "
 No person found

"; $("#ajax-response").html(result); } }, error : function(e) { console.log("ERROR: ", e); } }); }

5)Demo
Bật terminal hoặc lên, đưa con trỏ vào vị trí của project và gõ lệnh
mvn jetty:run

**5.1) Nhập tên và tuổi **

**5.2) Kết quả ajax trả về từ server **
Ta đã sử dụng HTTP method GET nhưng dữ liệu vẫn k bị hiển thị lên url => việc nói POST bảo mật hơn GET vì dữ liệu không được đưa lên url là chưa đúng !

Link download source code

https://www.dropbox.com/s/ov7wzcs49m3zgyx/viblo-spring-learn-ajax.zip?dl=0

Spring 4 MVC Ajax Hello World Example

In this tutorial, we will show you how to create a Spring MVC web project and submit a form via Ajax.

Technologies used :

Spring 4.2.2.RELEASE
Jackson 2.6.3
Logback 1.1.3
jQuery 1.10.2
Maven 3
JDK 1.8
Tomcat 8 or Jetty 9
Eclipse 4.5
Boostrap 3

P.S If the Jackson library is found in the project classpath, Spring will use Jackson to handle the json data to / from object conversion automatically.

Try this – Spring Boot Ajax example

Spring Boot AJAX Get and Post Examples with jQuery

Quick Reference

1.1 In HTML, use jQuery
$.ajax()
to send a form request.

jQuery(document).ready(function($) { $("#search-form").submit(function(event) { // Prevent the form from submitting via the browser. event.preventDefault(); searchViaAjax(); }); }); function searchAjax() { var data = {} data["query"] = $("#query").val(); $.ajax({ type : "POST", contentType : "application/json", url : "${home}search/api/getSearchResult", data : JSON.stringify(data), dataType : 'json', timeout : 100000, success : function(data) { console.log("SUCCESS: ", data); display(data); }, error : function(e) { console.log("ERROR: ", e); display(e); }, done : function(e) { console.log("DONE"); } }); }

1.2 Spring controller to handle the Ajax request.

@Controller public class AjaxController { @ResponseBody @RequestMapping(value = "/search/api/getSearchResult") public AjaxResponseBody getSearchResultViaAjax(@RequestBody SearchCriteria search) { AjaxResponseBody result = new AjaxResponseBody(); //logic return result; } }

Project Dependencies

4.0.0 com.mkyong spring4-mvc-maven-ajax-example war 1.0-SNAPSHOT spring4 mvc maven ajax example 1.8 4.2.2.RELEASE 2.6.3 1.1.3 1.7.12 1.2 3.1.0 org.springframework spring-webmvc ${spring.version} commons-logging commons-logging com.fasterxml.jackson.core jackson-core ${jackson.version} com.fasterxml.jackson.core jackson-databind ${jackson.version} javax.servlet jstl ${jstl.version} org.slf4j jcl-over-slf4j ${jcl.slf4j.version} ch.qos.logback logback-classic ${logback.version} javax.servlet javax.servlet-api ${servletapi.version} provided org.apache.maven.plugins maven-compiler-plugin 3.3 ${jdk.version} ${jdk.version} org.eclipse.jetty jetty-maven-plugin 9.2.11.v20150529 10 /spring4ajax org.apache.maven.plugins maven-eclipse-plugin 2.10 true true 2.0 spring4ajax org.apache.maven.plugins maven-war-plugin 2.6 false org.wildfly.plugins wildfly-maven-plugin 1.1.0.Alpha5 127.0.0.1 9990 admin admin spring4ajax.war

Download Source Code

References

About Author

Comments

Thanks. tutorial solved my problem

Thanks.This tutorial solved my problem

Hi Mkyong,I always found your examples clear and good,Thanks lot!

Hey guy, what example! So far the best tutorial i’ve ever seen. Thanks!!!

Thanks for the article . I am quite late but while working on this code, I get following issue.Multiple markers at this line– PostConstruct cannot be resolvedto a type– PostConstruct cannot be resolvedto a type

Anyone know how to resolve this?

Hi, is it possible to save an image in this way? how can I do it? Do you have any example? Thank you

Thank you mkYong for providing this good example.

I am able to deploy and start jetty with this project.

But I am getting below content on hitting http://localhost:2222/spring4ajax/ not showing search page.

Could you/someone please help me here.

Directory: /spring4ajax/spring4-mvc-maven-ajax-example-1.0-SNAPSHOT.war 13184243 bytes Apr 8, 2020 3:58:31 PM

method post not allowed

how to do CRUD operating in Spring MVC in eclipse without refreshing the page and connection with database

when i “$ mvn jetty:run “in the git bush it shows “No plugin found for prefix ‘jetty”‘

Could you please explain how can i do the same if i’m sending and receiving the data in XML instead of json?

Thanks

good tutorial, but i integration in my project and show this{“readyState”: 4,“responseText”: ”Estado HTTP 405 – Request method ‘POST’ not supportedtype Informe de estado

mensaje Request method ‘POST’ not supported

descripción El método HTTP especificado no está permitido para el recurso requerido.

Pivotal tc Runtime 3.1.5.RELEASE/8.0.36.A.RELEASE“,“status”: 405,“statusText”: “Método No Permitido”}

Could you please explain to me what the “$” sign mean in the following line:

jQuery(document).ready(function($) {And also why this line doesn’t start like:$(document) ?Thanks in advance!

this is a good example, thanks.

Hi Mkyong,

I have two questions. First, How to create layout file?And other question, Can we add annotation to validation for view class. i don’t want to write isValidSearchCriteria method.

thanks.

i got the following error while i execute the code …

The server refused this request because the request entity is in a format not supported by the requested resource for the requested method.

“status”: 415,

“statusText”: “Unsupported Media Type”

this is a good example, thanks.

Thanks

Hi Mkyoung,i’m getting this error :HTTP ERROR 406 Not Acceptable.

i’m sure that the ‘result’ object from ‘AjaxResponseBody’ class having a value when returned back to ajax response but i always get that error.

I’m using:– spring 4.0.2– jackson 2.6.3– jetty server

HI Mkyong,I’m uable to run this project in Tomcat 8, I mean the Tomcat starts properly with this project, but when I hit the url, it gives me 404.

Thanks,Kapil

Hi Mkyong,

Am trying to get this application up and running in JBoss AS7 but am getting a 404 when accessing http://localhost:8080/spring4ajax/search/api/getSearchResult/

I have the same issue with one of my application which works well in Tomcat but not in JBoss AS7, just wondering if there is a workaround if you know off.

Thanks

Article is updated with wildfly-maven-plugin, use this command
mvn wildfly:deploy
to deploy this web application to WildFly.

I am new in javawhere should I run this command

1. 404 is resources not found. Make sure ‘spring4ajax’ is your deployed web context.

2. If you get this example and deploy directly, the default web context will be this – http://localhst:8080/spring4-mvc-maven-ajax-example-1.0-SNAPSHOT

3. To update the WildFly web context, try this tutorial – https://mkyong.com/maven/maven-deploy-web-application-to-wildfly/

P.S This web application is tested with WildFly 9, no error.

hey guys , find given solution to compile the project.

you need to add following plugin in pom.xml

maven-war-plugin

2.4

false

Hope it would work for you guys , cheers 🙂

Thanks, article is updated with maven-war-plugin.

still can not work please help.HTTP Status 500 – An exception occurred processing JSP page /welcome.jsp at line 11

can you try that link after starting jetty servermake sure your port should not be used before.http://localhost:8080/spring4ajax/

It is not compiling:

Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) -> [Help 1]

Fixed, article is updated with maven-war-plugin.

Raul ,add this in your pom.xml

maven-war-plugin

2.4

false

Jeez, this is not a tutorial, but rather a template. It’s 400+ lines of code and merely a dozen lines of explanation.

Where is the web.xml file ? I have the following error:

org.xml.sax.SAXParseException; systemId: file:/C:/DEV/apache-tomcat-8.0.28/webapps/spring4-mvc-maven-ajax-example-1.0-SNAPSHOT/WEB-INF/web.xml; lineNumber: 1; columnNumber: 2; Premature end of file.

at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(Unknown Source)at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl$PrologDriver.next(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(Unknown Source)at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(Unknown Source)at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(Unknown Source)

For servlet container >= 3, web.xml is option. Code is updated, try clone the source code from GitHub again.

you need to add following plugin in pom.xml

maven-war-plugin

2.4

false

Hi Mkyong,

I reckon that you will find that using my library http://www.ajaxanywhere.com makes things a lot easier with a far more maintainable outcome. Ajaxanywhere is intended to provide declarative Ajax for apps that use server side rendering. Because it is declarative, by using HTML markup, you will find that you use very llittle to none javascript code. Please have a look at the examples: http://examples.ajaxanywhere.comI would appreciate your feedback a lot!Thanks!

Good stuff, but you should keep it more simple. Some details are not really needed here. For example, the @JsonView annotation only confused me more untill I figured it has nothing to do with the scope of this presentation. Just skip it.Also, some details are maybe missing. For example, in order to work, I had to add an extention in ajax url (“url: getSearchResult.ext”) and then add this in web.xml:

dispatcher*.ext

servlet-mappingservlet-name dispatcher /servlet-nameurl-pattern *.ext /url-pattern/servlet-mapping

I’m sending the request ajax to spring controller. But it not showing anything WHen I send the request.

My ajax request

$(".secs li a").on("click",function(e){ e.preventDefault(); var id = $(this).data("value"); $.ajax({ url:"../tmax", type:"POST", data:{id:id}, success: function(response){ $("#testdata").html(response); } }) })

And my controller

@RequestMapping(value = "/tmax", method = RequestMethod.POST) public ModelAndView tmax(@RequestParam("id") String id) { ModelAndView model = new ModelAndView("tmax"); model.addObject("dataCOLL", userService.finddataCOLLById(id)); return model; }

I’m sending the request in the home.jsp. The data should get
tmax.jsp
and show in home.jsp.

My tmax.jsp page

Hello World

Thanx

Client side

An AJAX usage implies a lot of code on a client side of a web-application. In this section I will demonstrate a basics which will help you to understand what steps to do for implementation of AJAX calls. Let’s examine case with creation of a new smartphone in the application.

First of all I need to add JQuery library to HTML page:

A main part of the HTML has one valuable update – extension of form action attribute was changed to .json

Create new Smartphone

Here you can create new Smartphone:

Producer: Nokia
iPhone
HTC
Samsung

Model:

Price:

Home page

And now, ladies and gentlemen, I wish to introduce a snippet of JQuery code for the creation of new smartphone:

$(document).ready(function() { $(‘#newSmartphoneForm’).submit(function(event) { var producer = $(‘#producer’).val(); var model = $(‘#model’).val(); var price = $(‘#price’).val(); var json = { “producer” : producer, “model” : model, “price”: price}; $.ajax({ url: $(“#newSmartphoneForm”).attr( “action”), data: JSON.stringify(json), type: “POST”, beforeSend: function(xhr) { xhr.setRequestHeader(“Accept”, “application/json”); xhr.setRequestHeader(“Content-Type”, “application/json”); }, success: function(smartphone) { var respContent = “”; respContent += ”

Smartphone was created: [“; respContent += smartphone.producer + ” : “; respContent += smartphone.model + ” : ” ; respContent += smartphone.price + “]

“; $(“#sPhoneFromResponse”).html(respContent); } }); event.preventDefault(); }); });

I’m not going to stop on this code and explain it in detail because you can read about AJAX and JQuery on official site.

Brief explanation: when someone want to submit the form with specified ID, all form fields are assigned to appropriate variables. After that a new JSON document is generated based on the form field variables. Then AJAX call is performed. It directed to URL which is specified in the action attribute of form tag. The JSON is used as a data which need to be processed. Type of the request is POST (it can vary depending on operation, e.g. for update it will has PUT value). In the beforeSend function I explicitly specify required headers for JSON format. In the end I formulate a response and insert it in DOM.

That’s it what related to creation of smartphone. The update of smartphone is the similar, just type of the request need to be changed.

Now let’s see how to work with DELETE type of requests. As previously I need to change extension of URLs to .json

Delete

A JQuery code for the DELETE operation will be a little bit distinct compared to POST and PUT.

$(document).ready(function() { var deleteLink = $(“a:contains(‘Delete’)”); $(deleteLink).click(function(event) { $.ajax({ url: $(event.target).attr(“href”), type: “DELETE”, beforeSend: function(xhr) { xhr.setRequestHeader(“Accept”, “application/json”); xhr.setRequestHeader(“Content-Type”, “application/json”); }, success: function(smartphone) { var respContent = “”; var rowToDelete = $(event.target).closest(“tr”); rowToDelete.remove(); respContent += ”

Smartphone was deleted: [“; respContent += smartphone.producer + ” : “; respContent += smartphone.model + ” : ” ; respContent += smartphone.price + “]

“; $(“#sPhoneFromResponse”).html(respContent); } }); event.preventDefault(); }); });

The first distinction is the selector for the element. In case with DELETE I want to work with links but not with forms. The type of the AJAX call is changed to DELETE value. There is no any data which is send with the request. And in the end I delete the row with the smartphone which need to be deleted.

Cascading Dropdown List with Ajax in Spring MVC Framework and Spring Data JPA

Preparations

I need to modify the SmartphoneController class by removing methods which are not required any more. This is a first step of AJAX integration.

//imports are omitted @Controller @RequestMapping(value=”/smartphones”) public class SmartphoneController { @Autowired private SmartphoneService smartphoneService; @RequestMapping(value=”/create”, method=RequestMethod.GET) public ModelAndView createSmartphonePage() { ModelAndView mav = new ModelAndView(“phones/new-phone”); mav.addObject(“sPhone”, new Smartphone()); return mav; } @RequestMapping(value=”/create”, method=RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public Smartphone createSmartphone(@RequestBody Smartphone smartphone) { return smartphoneService.create(smartphone); } @RequestMapping(value=”/edit/{id}”, method=RequestMethod.GET) public ModelAndView editSmartphonePage(@PathVariable int id) { ModelAndView mav = new ModelAndView(“phones/edit-phone”); Smartphone smartphone = smartphoneService.get(id); mav.addObject(“sPhone”, smartphone); return mav; } @RequestMapping(value=”/edit/{id}”, method=RequestMethod.PUT, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public Smartphone editSmartphone(@PathVariable int id, @RequestBody Smartphone smartphone) { smartphone.setId(id); return smartphoneService.update(smartphone); } @RequestMapping(value=”/delete/{id}”, method=RequestMethod.DELETE, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public Smartphone deleteSmartphone(@PathVariable int id) { return smartphoneService.delete(id); } @RequestMapping(value=””, method=RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) @ResponseBody public List< Smartphone > allPhones() { return smartphoneService.getAll(); } @RequestMapping(value=””, method=RequestMethod.GET) public ModelAndView allPhonesPage() { ModelAndView mav = new ModelAndView(“phones/all-phones”); List< Smartphone > smartphones = new ArrayList< Smartphone >(); smartphones.addAll(allPhones()); mav.addObject(“smartphones”, smartphones); return mav; } }

You can compare the new version of the SmartphoneController with the older one. Methods which process PUT, POST, DELETE requests and return ModelAndView objects were removed. The methods were deleted because AJAX calls can be addressed directly to REST methods. Now the controller contains just two types of methods:

The first type directs user to pages where CRUD operations can be performed.
The second type performs CRUD operations (REST methods)

Spring Components

Only the important classes will be displayed.

4.1
@RestController
to handle the Ajax request. Read the comments for self-explanatory.

package com.mkyong.web.controller; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; import com.mkyong.web.model.AjaxResponseBody; import com.mkyong.web.model.SearchCriteria; import com.mkyong.web.model.User; @RestController public class AjaxController { List users; // @ResponseBody, not necessary, since class is annotated with @RestController // @RequestBody - Convert the json data into object (SearchCriteria) mapped by field name. // @JsonView(Views.Public.class) - Optional, filters json data to display. @JsonView(Views.Public.class) @RequestMapping(value = "/search/api/getSearchResult") public AjaxResponseBody getSearchResultViaAjax(@RequestBody SearchCriteria search) { AjaxResponseBody result = new AjaxResponseBody(); if (isValidSearchCriteria(search)) { List users = findByUserNameOrEmail(search.getUsername(), search.getEmail()); if (users.size() > 0) { result.setCode("200"); result.setMsg(""); result.setResult(users); } else { result.setCode("204"); result.setMsg("No user!"); } } else { result.setCode("400"); result.setMsg("Search criteria is empty!"); } //AjaxResponseBody will be converted into json format and send back to the request. return result; } private boolean isValidSearchCriteria(SearchCriteria search) { boolean valid = true; if (search == null) { valid = false; } if ((StringUtils.isEmpty(search.getUsername())) && (StringUtils.isEmpty(search.getEmail()))) { valid = false; } return valid; } // Init some users for testing @PostConstruct private void iniDataForTesting() { users = new ArrayList (); User user1 = new User("mkyong", "pass123", "[email protected]", "012-1234567", "address 123"); User user2 = new User("yflow", "pass456", "[email protected]", "016-7654321", "address 456"); User user3 = new User("laplap", "pass789", "[email protected]", "012-111111", "address 789"); users.add(user1); users.add(user2); users.add(user3); } // Simulate the search function private List findByUserNameOrEmail(String username, String email) { List result = new ArrayList (); for (User user : users) { if ((!StringUtils.isEmpty(username)) && (!StringUtils.isEmpty(email))) { if (username.equals(user.getUsername()) && email.equals(user.getEmail())) { result.add(user); continue; } else { continue; } } if (!StringUtils.isEmpty(username)) { if (username.equals(user.getUsername())) { result.add(user); continue; } } if (!StringUtils.isEmpty(email)) { if (email.equals(user.getEmail())) { result.add(user); continue; } } } return result; } }

4.2 The “json data” will be converted into this object, via
@RequestBody
.

package com.mkyong.web.model; public class SearchCriteria { String username; String email; //getters and setters }

4.2 Create a dummy class for
@JsonView
, to control what should be returned back to the request.

package com.mkyong.web.jsonview; public class Views { public static class Public {} }

4.3 User object for search function. Fields which annotated with
@JsonView
will be displayed.

package com.mkyong.web.model; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; public class User { @JsonView(Views.Public.class) String username; String password; @JsonView(Views.Public.class) String email; @JsonView(Views.Public.class) String phone; String address; //getters, setters and contructors }

4.4 This object will be converted into json format and return back to the request.

package com.mkyong.web.model; import java.util.List; import com.fasterxml.jackson.annotation.JsonView; import com.mkyong.web.jsonview.Views; public class AjaxResponseBody { @JsonView(Views.Public.class) String msg; @JsonView(Views.Public.class) String code; @JsonView(Views.Public.class) List result; //getters and setters }

The

@JsonViewbelongs to Jackson library, not Spring framework.