如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果

如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果

在这个例子中,我们在JSP中使用ajax创建一个搜索栏,在同一页面上显示结果。AJAX是Asynchronous JavaScript and XML的缩写。其中Ajax主要用于在同一网页上显示另一个网页的内容,而不需要刷新页面。你可以在这里阅读更多关于Ajax技术的信息。

步骤:
我们使用JQuery ready函数,以确保我们的JavaScript在页面加载前不会执行。在ready函数中。
我们执行一个简单的使用点击事件,id=”#sub”,它是提交底层的id,应该对其进行操作。

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

在上面的代码中,

  • $("user_input").value()。从文本字段获取输入值,其中user_input是id。
  • $.post("SearchResult.jsp", {n3:fn}, function(data){})。在这种情况下,fn值被作为参数传入index.jsp页面,从数据库中搜索结果并显示在同一页面上。fn值可以通过使用request.getParameter(“n3”)在index.jsp获得。
  • $("#msg").html(data): msg是div标签的id,意味着它将只在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>
HTML
  • index.jsp
<html>
  
<body>
    <center>
        <%     
         String uname=request.getParameter("n3");
         out.println("Welcome "+uname);
         %>
    </center>
</body>
  
</html>
HTML

输出
Before:
如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果?
After:
如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册