极客教程如何在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);
});
在上面的代码中，
$("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>
- index.jsp
<html>
<body>
<center>
<%
String uname=request.getParameter("n3");
out.println("Welcome "+uname);
%>
</center>
</body>
</html>
输出
Before:
After:
