Java @ Desk: JQuery | Java at your desk

Jquery pass Json data from HTML to Servlet in Ajax

Jquery pass Json data from HTML to Servlet in Ajax

In order to pass JSON data from HTML to servlet, javascript object is created and values are set into user defined properties of the object. Data is passed in String json format using JSON.stringify(jsonData).

Data is passed using the data attribute of ajax service.

Below example is to illustrate the same. Value of a textbox is passed to a servlet in JSON String format.

HTML File:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery-ui.min.js"></script>

</head>
<body>
 <form id="inputform">
  <div style="height: 40px;"></div>

  <input type="text" id="textBox" name="textBox"> <input
   type="button" value="Identify" onclick="submitJsonPostData()" />
 </form>
</body>
</html>


JS File:
function submitJsonPostData() {
 var text = $("#textBox").val();
 var jsonData = new Object();
 jsonData.text = text;
 $.ajax({
  url : 'JsonPostDataServlet',
  type : 'POST',
  data : {
   jsonPostRequest : JSON.stringify(jsonData)
  },
  success : function(response) {
  },
  error : function(response) {
   alert("Error: Timeout please try again later");
  },
 });
}




Servlet:
package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/JsonPostDataServlet")
public class JsonPostDataServlet extends HttpServlet {
 @SuppressWarnings("unchecked")
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  String jsonPostRequest = request.getParameter("jsonPostRequest");
  System.out.println("Json Post Request received from JSP - " + jsonPostRequest);
 }
}


Output:
Json Post Request received from JSP -
{"text":"TextValue"}

Change label in HTML using Jquery

Change label in HTML using Jquery

Changing the label or a message is often required in an application. For example, on a registration page there is a validation required to fill all the fields on click of a button. Instead of showing an alert message, a message in a label looks quiet good in the form. Its more user frieldly.

To update a label, for property is used and a new html is appended to the for property name of the label.

To use the inbuilt function in JS, following library must be included in the HTML file
1) jquery.min.js


Here is the sample html code to change the label value on click of a button

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

<script type="text/javascript">

function changeLabel() {
    $("label[for='LabelName']").html("Label On Load Changed");
}
</script>

</head>
<body>
 <div style="height: 40px;"></div>

 <p><strong><label for="LabelName">Label On Load</label></strong></p>

 <div>
  <button onclick="changeLabel();">Change Label</button>
 </div>

 <div style="height: 40px;"></div>

</body>
</html>

Jquery show hide by id in Javascript

Jquery show hide in Javascript

show and hide the UI elements using the id attribute of the html element.
hide() - Jquery method to hide the field
show() - Jquery method to show the field

To use the inbuilt function in JS, following library must be included in the HTML file
1) jquery.min.js

Here is the sample html code to show hide the image

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

<script type="text/javascript">

function showImage() {
 $("#processNewImage").show();
}
function hideImage() {
 $("#processNewImage").hide();
}
</script>

</head>
<body>
 <div style="height: 40px;"></div>

 <div>
  <button onclick="showImage();">Show Image</button>
  <button onclick="hideImage();">Hide Image</button>
 </div>

 <div style="height: 40px;"></div>

 <div>
  <img src="images/giphy.gif" id="processNewImage"
   name="processNewImage">
 </div>
</body>
</html>