Рубрики

Как отобразить результат поиска другой страницы на той же странице, используя ajax в JSP?

В этом примере мы создаем панель поиска для отображения результата на той же странице при использовании ajax в JSP. AJAX расшифровывается как асинхронный JavaScript и XML. Где Ajax в основном используется для отображения содержимого другой веб-страницы на той же самой веб-странице без обновления страницы. Вы можете прочитать больше о технологии AJAX здесь .

Подходить:
Мы используем функцию готовности JQuery, чтобы убедиться, что наш JavaScript не выполняется до тех пор, пока страница не загрузится. Внутри готовой функции,
мы выполняем простое событие click использования с id=#sub — это идентификатор основания отправки, для которого должно быть выполнено действие.

var fn=$("#user_input").val();

$.post("SearchResult.jsp", {n3:fn}, function(data){    

$("#msg").html(data); 

});

В приведенном выше коде

  • $ («User_input»). Value (): принимает входные значения из текстового поля, где user_input — идентификатор.
  • $ .post («SearchResult.jsp», {n3: fn}, function (data) {}): в этом случае значение fn передается в качестве аргумента на страницу index.jsp, которая выполняет поиск из базы данных и отображается на той же странице , Значение fn можно получить в index.jsp с помощью request.getParameter(n3) .
  • $ («# Msg»). Html (data): msg — это идентификатор тега div означает, что результат будет отображаться только внутри тега div.

Пример:

  • 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>

  • index.jsp

    <html>

      

    <body>

        <center>

            <%     

             String uname=request.getParameter("n3");

             out.println("Welcome "+uname);

             %>

        </center>

    </body>

      

    </html>

Выход
Перед:

После:

Рекомендуемые посты:

Как отобразить результат поиска другой страницы на той же странице, используя ajax в JSP?

0.00 (0%) 0 votes