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

在这个例子中，我们正在创建一个搜索栏，在 JSP 中使用 ajax 在同一页面上显示结果。 AJAX 代表异步 JavaScript 和 XML。其中 Ajax 主要用于在同一网页上显示另一个网页内容，而无需刷新页面。您可以在此处阅读有关 ajax 技术的更多信息。

方法：
我们使用 JQuery 就绪函数来确保我们的 JavaScript 在页面加载之前不会执行。在就绪函数内部，
我们使用id="#sub"执行一个简单的点击事件，它是应该执行操作的提交底部的 id。

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

在上面的代码中，

• $(“user_input”).value()：从文本字段中获取输入值，其中user_input是 id。
• $.post(“SearchResult.jsp”, {n3:fn}, 函数(data){})：在这种情况下， fn值作为参数传递到index.jsp页面，该页面从数据库中搜索结果并显示在同一页面上. fn值可以通过使用request.getParameter("n3")在index.jsp中获取。
• $(“#msg”).html(data): msg 是 div 标签的 id 意思是，它只会在 div 标签内显示结果。

例子：

• 索引.html

    
  
      search result of another page on 
        same page using ajax in JSP
      
      
  
    
  
      
          
              
                GeeksforGeeks
              Enter Your Name
              
              
              
                Search
            
          
      
      
      
          
        
          
          
          
              $(document).ready(function() {
                  $("#sub").click(function() {
                      var fn = $("#user_input").val();
                      $.post("index.jsp", {
                          n3: fn
                      }, function(data) {
                          $("#msg").html(data);
                      });
    
                  });
              });
          
      
  
    

• 索引.jsp

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

输出
前：

后：