Spring Mvc Jquery Ajax Example | Create New Smartphone

Spring MVC server site GET methods example

In this section simple Spring backend that handle GET method requests is presented.


import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; @Controller public class EchoGetController { @RequestMapping(value = "/examples/echo", method = RequestMethod.GET) @ResponseBody public String makeGetEcho(@RequestParam("text") String text) { return text; } }


Spring MVC – Refactoring a jQuery Ajax Post example

Reviewing a jQuery Ajax form POST and Spring MVC example, find out the following patterns :

In Spring MVC, use

@RequestParam

to accept the Ajax POST data.


@RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST) @ResponseBody public String saveHosting( @RequestParam int id, @RequestParam String domain, @RequestParam String name, @RequestParam String desc, @RequestParam String tags, @RequestParam String afflink, @RequestParam boolean display, @RequestParam boolean hosting, @RequestParam boolean cdn, @RequestParam boolean paas, @RequestParam String imageUrl, @RequestParam String favUrl, @RequestParam String whoisPattern ) { //...do something }


The above code is working fine, just a bit weird and hard to maintain. Both Javascript

$.post

and Spring MVC

@RequestParam

is dealing with too many parameters.

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


Refactoring Spring MVC

2.1 Create a POJO to store the Ajax POST data.


public class HostingForm { private boolean display; private boolean cdn; private boolean hosting; private boolean paas; private String whoisPattern; private long id; private String domain; private String name; private String desc; private String tags; private String affLink; private String imageUrl; private String favUrl; //getters and setters


2.2 Accept the Ajax POST data with

@RequestBody



@RestController //... @RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST) public String updateHosting(@RequestBody HostingForm hostingForm) { //... }


With

@RequestBody

, Spring will maps the POST data to

HostingForm

POJO (by name) automatically. Done.

You mat interest at this tutorial – Complete Spring 4 MVC + Ajax Form Post example

References

About Author

Comments

i sending formdata to controller class. in controller how to access these data?

$(“button#submitMDRtable”).click(function(){var data = [];var minAmt, maxAmt, type, minCap, maxCap;$(“table tbody tr”).each(function(index) {minAmt = $(this).find(‘.minAmt’).text();maxAmt = $(this).find(‘.maxAmt’).text();type = $(this).find(‘.type’).text();minCap = $(this).find(‘.minCap’).text();maxCap = $(this).find(‘.maxCap’).text();//alert(minAmt+”–“+maxAmt+”–“+type+”–“+minCap+”–“+maxCap)//—->Form validation goes heredata.push({minAmt: minAmt,maxAmt: maxAmt,type: type,minCap: minCap,maxCap: maxCap});});submitFormData(data);console.log(data);});

function submitFormData(formData) {var url= ‘/mdrcharges’;alert(url);$.ajax({type: ‘POST’,data: formData,cache: false,processData: false,contentType: false,beforeSend: beforeSendHandler,url: url,success: function(result){if(result.success == true) {$(‘.alert-success’).show();$(‘.alert-danger’).hide();$(“#successmsg”).html(result.msg);setTimeout(function() {$(“.alert-success”).alert(‘close’);}, 10000);} else {$(‘.alert-danger’).show();$(‘.alert-success’).hide();$(“#error”).html(result.msg);setTimeout(function() {$(“.alert-danger”).alert(‘close’);}, 10000);}}});}

OK. This is an easy example, and everyone saw it a hundred times. But tell us what do you will do if you have here is a JSON:

{“abc”:{“sr”:”ok”,”citi”:[{“id”:”c2″,”value”:”london”},{…}…,{…}]}}

etc ?

Just send a POST request, along with your JSON data.

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.

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)

[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

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

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

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

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

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

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

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

Click on the button to load result.html file:

STAGE

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

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


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)

Recently I’ve to use jQuery, AJAX in Spring MVC Java example. In .jsp (View) I wanted to update specific field every 3 second. Let me share this simple example.

This example will help you if you have any one of below queries:

• Spring Framework + jQuery AJAX Request Example
• Spring MVC 4 and jQuery Integration Tutorial
• How to get a new value from a Spring Controller using Ajax every n second?
• Spring 4 MVC, Ajax and jQuery Magic Tutorials
• How to use Ajax with Spring MVC 4 using Annotations and JQuery?

We will do a simple web application which will show

Random Number

with

Current Time

every 3 seconds.

Let’s get started.

Step-1


Pre-Requisite:

https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Deploy this project successfully on Tomcat)

Step-2

Create 2 new files.

ajax.jsp

and

CrunchifySpringAjaxJQuery.java


package com.crunchify.controller; import java.util.Date; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import java.util.Random; /** * @author Crunchify.com * */ @Controller public class CrunchifySpringAjaxJQuery { @RequestMapping(“/ajax”) public ModelAndView helloAjaxTest() { return new ModelAndView(“ajax”, “message”, “Crunchify Spring MVC with Ajax and JQuery Demo..”); } @RequestMapping(value = “/ajaxtest”, method = RequestMethod.GET) public @ResponseBody String getTime() { Random rand = new Random(); float r = rand.nextFloat() * 100; String result = “Next Random # is

” + r + ”

. Generated on

” + new Date().toString() + ”

“; System.out.println(“Debug Message from CrunchifySpringAjaxJQuery Controller..” + new Date().toString()); return result; } }

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

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.

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

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.

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



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 !


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

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

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.