How to display search result of another page on same page using ajax in JSP? - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">      </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>
<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js">      </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>
<html>  <body>    <center>        <%              String uname=request.getParameter("n3");         out.println("Welcome "+uname);         %>    </center></body>  </html>
OutputBefore:After:
Java-JSP
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?