Send and receive data using Jquery/Ajax

Desired output

Click image to zoom












Download project from  here  or  here


Project Structure





































example2.jsp

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>AJAX in java web application using jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/Example2.js"></script>
</head>
<body>
<form>
  
    AJAX implementation in JSP and Servlet using JQuery
     <br /><br />
     Enter your Name: <input type="text" id="userName" onblur='Example2()'/>
 

   <br /> <br /> <br /> <br />
    Response from jQuery Ajax Request on Blur event
   <div id="ajaxResponse"></div>

</form>
</body>
</html>



Example2.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function Example2()
{
var value = document.getElementById("userName").value;
var url="Example2_Hello";
alert("url : "+url);
var parameter=value;
alert("parameter : "+parameter);
var r=doPostAjax(url,parameter); // do not use alert(r);
displayData(r);

 
}

function doPostAjax(url,parameter)
{

    alert("doPostAjax " );
   
    return ($.ajax({
    url: url,
    type: "POST",
    async: false,
    data: "userName="+parameter+"&userName2="+"rahul",
    success : function (response)
              {
                  ajaxResponse = response;
                   //document.getElementById('ajaxResponse').value = response;
              },
    // other properties
}));
}


function displayData(x) {
    x.success(function(realData) {
        $('#ajaxResponse').text(realData).css({color: 'green'});
    });
}


Note: 
1] Make sure that Jquery file is the first script loaded on your page.
2] actual syntax is {first:first, second:second, type:"abc"},
    ie. name value pair 

    $.ajax({
    type: "POST", 
    url: "PageName.jsp",
    data: {first:first, second:second, type:"abc"},
     success: function(response){
       var win = window.open("","","width=800, height=400,resizable=yes");
       win.document.write(response);      
    }
}); 


 Example2_Hello.java

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package com.example;

import java.io.IOException;
import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Example2_Hello extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {

        String userName = request.getParameter("userName");
        System.out.println("userName :   "+userName);
        String userName2 = request.getParameter("userName2");
        System.out.println("userName2 :   "+userName2);
        String Sum="";
      
       
        if (userName.equals(""))
        {
                userName = "User name cannot be empty";
        }
        else
        {
               // userName = "Hello " + userName;
            CommonFunctions obj=new CommonFunctions();
             Sum=obj.add(userName);
            System.out.println("Sum :  "+Sum);
        }
       
        response.setContentType("text/plain");
        response.getWriter().write(Sum);
}


}




CommonFunctions.java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
package com.example;

public class CommonFunctions {
   
    public String add(String userName) {
        String output= userName+2;
        System.out.println(output);
        return output;
    }

}


web.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>csv</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>SomeServlet</servlet-name>
    <servlet-class>com.example.SomeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>SomeServlet</servlet-name>
    <url-pattern>/SomeServlet/*</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>Example2_Hello</servlet-name>
    <servlet-class>com.example.Example2_Hello</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Example2_Hello</servlet-name>
    <url-pattern>/Example2_Hello/*</url-pattern>
  </servlet-mapping>
</web-app>


Desired output

No comments:

Post a Comment

Subscribe to: Posts (Atom)