Skip to content
Related Articles

Related Articles

Improve Article
How to display search result of another page on same page using ajax in JSP?
  • Difficulty Level : Medium
  • Last Updated : 30 Aug, 2019

In this example, we are creating a search bar to display the result on the same page in using ajax in JSP. AJAX stands for Asynchronous JavaScript and XML. Where Ajax is mainly used for Displaying another web page content on the same web page without refreshment of the page. You can read more about ajax technology here.

Approach:
We use the JQuery ready function in order to make sure that our JavaScript does not execute until the page has loaded. Inside the ready function,
we perform a simple use click event with id="#sub" it is the id of the submit bottom on which the action should be performed.




var fn=$("#user_input").val();
$.post("SearchResult.jsp", {n3:fn}, function(data){    
$("#msg").html(data); 
});

In the above code, the

  • $(“user_input”).value(): Takes the input values from text field where user_input is the id.
  • $.post(“SearchResult.jsp”, {n3:fn}, function(data){}): In this case fn value is been pass as argument into index.jsp page which search result from database and display on the same page.fn value can be obtain in index.jsp by using request.getParameter("n3").
  • $(“#msg”).html(data): msg is the id of the div tag means, it will display the result only inside the div tag.

Example:

  • index.html




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>search result of another page on 
          same page using ajax in JSP</title>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, 
                       initial-scale=1.0">
    </head>
      
    <body>
        <center>
            <div>
                <h1 style="color:green">
                  GeeksforGeeks</h1>
                <h2>Enter Your Name</h2>
                <input placeholder="Search" 
                       type="text" 
                       id="user_input"/>
                
                <button type="Submit" id="sub">
                  Search
              </button>
            </div>
        </center>
        
        <div class="box_1" id="msg">
            <script type="text/javascript" 
                    src=
          </script>
            
            <script src="jquery-3.2.1.js"></script>
            <script>
                $(document).ready(function() {
                    $("#sub").click(function() {
                        var fn = $("#user_input").val();
                        $.post("index.jsp", {
                            n3: fn
                        }, function(data) {
                            $("#msg").html(data);
                        });
      
                    });
                });
            </script>
        </div>
    </body>
      
    </html>
  • index.jsp




    <html>
      
    <body>
        <center>
            <%     
             String uname=request.getParameter("n3");
             out.println("Welcome "+uname);
             %>
        </center>
    </body>
      
    </html>

Output
Before:

After:




My Personal Notes arrow_drop_up
Recommended Articles
Page :