Chuyển tới nội dung
Home » Spring Mvc With Jquery Ajax Example | Search Form

Spring Mvc With Jquery Ajax Example | Search Form

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

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"%>

Search Form



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
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

<br /> The jQuery Example<br />
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

<br /> The jQuery Example<br />
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”.

<br /> The jQuery Example<br />
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” />


<br /> The jQuery Example<br />
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

<br /> The jQuery Example<br />
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:

  • Web

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"%>

<br /> Ajax in Spring MVC<br />

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)

EN

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 boot Jquery Ajax Crud
Spring boot Jquery Ajax Crud

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):
  1. GET
  2. Trace: đọc lỗi
  3. Option
  4. Head: đọc phần header
  • 3 phép đại diện cho ghi (write):
  1. PUT
  2. POST
  3. 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:

  1. 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)
  2. 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:

  1. Spring 4.2.2.RELEASE
  2. Jackson 2.6.3
  3. Logback 1.1.3
  4. jQuery 1.10.2
  5. Maven 3
  6. JDK 1.8
  7. Tomcat 8 or Jetty 9
  8. Eclipse 4.5
  9. 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"%>

<br /> Spring Ajax Example<br />


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
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

All rights reserved

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 :

  1. Spring 4.2.2.RELEASE
  2. Jackson 2.6.3
  3. Logback 1.1.3
  4. jQuery 1.10.2
  5. Maven 3
  6. JDK 1.8
  7. Tomcat 8 or Jetty 9
  8. Eclipse 4.5
  9. 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
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

Ajax in Spring MVC Framework
Ajax in Spring MVC Framework

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
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.

CRUD Operations In MVC | Using Jquery Ajax | Part-1 Retrieve Database Data & Show In A View
CRUD Operations In MVC | Using Jquery Ajax | Part-1 Retrieve Database Data & Show In A View

Keywords searched by users: spring mvc with jquery ajax example

How To Use Ajax And Jquery In Spring Web Mvc (.Jsp) Application • Crunchify
How To Use Ajax And Jquery In Spring Web Mvc (.Jsp) Application • Crunchify
Code-With-The-Flow: Jquery Ajax Requests In Spring Mvc Example
Code-With-The-Flow: Jquery Ajax Requests In Spring Mvc Example
Code Example - How To Make Ajax Calls With Java Spring Mvc - Analytics Yogi
Code Example – How To Make Ajax Calls With Java Spring Mvc – Analytics Yogi
How To Integrate Jquery Ajax Post/Get & Spring Mvc | Spring Boot | Java  Techie - Youtube
How To Integrate Jquery Ajax Post/Get & Spring Mvc | Spring Boot | Java Techie – Youtube
Part 5 # Spring Mvc Application With Ajax | Ashok It - Youtube
Part 5 # Spring Mvc Application With Ajax | Ashok It – Youtube
Spring 3 Mvc Autocomplete With Jquery & Json Tutorial & Example
Spring 3 Mvc Autocomplete With Jquery & Json Tutorial & Example
Spring Mvc - Multiple File Upload With Progress Bar In Ajax And Jquery
Spring Mvc – Multiple File Upload With Progress Bar In Ajax And Jquery
Spring Mvc Ajax Hello World Example - Kiến Thức Cơ Bản Http Và Ajax
Spring Mvc Ajax Hello World Example – Kiến Thức Cơ Bản Http Và Ajax
Github - Stevehanson/Spring-Mvc-Ajax: Sample Spring Mvc Application  Demonstrating Json Ajax Requests With Java Spring Mvc Back-End.
Github – Stevehanson/Spring-Mvc-Ajax: Sample Spring Mvc Application Demonstrating Json Ajax Requests With Java Spring Mvc Back-End.
38 - Spring Mvc - Project Work | Ajax Using Jquery (Contact App) - By Ezeon  - Youtube
38 – Spring Mvc – Project Work | Ajax Using Jquery (Contact App) – By Ezeon – Youtube
Spring Boot Ajax Jquery Example - Learning To Write Code For Beginners With  Tutorials
Spring Boot Ajax Jquery Example – Learning To Write Code For Beginners With Tutorials
Ajax In Spring Mvc - Learn Programming With Real Apps
Ajax In Spring Mvc – Learn Programming With Real Apps
How To Integrate Jquery Ajax Post/Get & Spring Mvc | Spring Boot | Java  Techie - Youtube
How To Integrate Jquery Ajax Post/Get & Spring Mvc | Spring Boot | Java Techie – Youtube
How to integrate JQuery Ajax POST/GET & Spring MVC | Spring Boot | Java Techie
How To Integrate Jquery Ajax Post/Get & Spring Mvc | Spring Boot | Java Techie – Youtube
Ajax In Spring Mvc - Learn Programming With Real Apps
Ajax In Spring Mvc – Learn Programming With Real Apps

See more here: kientrucannam.vn

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *