Quarkus:
Sending CRUD (POST,GET,UPDATE,DELETE) messages to a Quarkus REST Service from an HTML Page.
Given the a simple REST Service in Quarkus for basic CRUD operations (Create, Read, Update, Delete) calling the Read operation is as simple as invoking a GET method from an HTML form. On the other hand, invoking Create, Update and Delete normally implies sending an ID and/or some Data to the service. HTML Forms allow basic GET and POST methods, but no UPDATE and DELETE are offered by them. To solve this situation JQuery AJAX calls are necessary.
Let the following simple REST service be our target:
package org.acme;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.core.MediaType;
@Path("/example/crud")
public class CRUDResource {
@GET
@Produces(MediaType.TEXT_PLAIN)
public String read() {
System.out.println("READ");
return "READ";
}
@POST
@Consumes(MediaType.TEXT_PLAIN)
public void create(String message){
System.out.println("CREATE:"+message);
}
@PUT
@Consumes(MediaType.TEXT_PLAIN)
@Produces(MediaType.TEXT_PLAIN)
public String update(String message){
System.out.println("UPDATE:"+message);
return message;
}
The Create (POST) and Update (PUT) methods are waiting for a String message containing the necessary information to perform those tasks. A simple form
<form method='POST' action="/example/crud">
<input name='message'/>
<input type='Submit'>CREATE</input>
</form>
Will NOT work as it would invoke an expected public create() with no parameters.
On the other side, HTML forms do not allow PUT (Update) and DELETE (Delete) messages
To invoke these methods, AJAX calls are needed. For it we will be using JQUERY:
The following HTML code will allow us to call the CREATE UPDATE and DELETE (POST/PUT/DELETE) methods:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<title>CRUD Example</title>
</head>
<body>
<form method="POST" action="/example/crud">
<input type="text" id="createMessage" name="createMessage">Message:</input>
<input type="button" value="CREATE"
onclick="
var messageValue= $('#createMessage').val();
$.ajax({
url: '/example/crud',
type: 'POST',
data: jQuery.param({message: messageValue}),
contentType: 'text/plain',
dataType: 'text',
success: function(result) {
alert('OK:Created');
},
error:
function(result) {
alert('ERROR:'+result);
}
});")>
</form>
<form method="GET" action="/example/crud">
<input type="submit" value="READ"/>
</form>
<form>
<input type="text" id="updateMessage" name="message">Message:</input>
<input type="button" value="UPDATE"
onclick="
var messageValue= $('#updateMessage').val();
$.ajax({
url: '/example/crud',
type: 'PUT',
data: jQuery.param({message: messageValue}),
contentType: 'text/plain',
dataType: 'text',
success: function(result) {
alert('OK:'+result);
},
error:
function(result) {
alert('ERROR:'+result);
}
});")>
</form>
<form>
<!--input type="text" name="message">Message:</input-->
<input type="button" value="DELETE"
onclick="$.ajax({
url: '/example/crud',
type: 'DELETE',
success: function(result) {
alert('OK');
}
});")>
</form>
</body>
</html>
Comments
Post a Comment