为什么单击搜索时页面会刷新？
[英]Why does page refresh when i click search?
问题描述
I am trying to build a program that would help me add products to a particular website, so for this, the products (already fed into the database) are being called using jsp (I have used a custom bean that would handle all connections etc.). 
我正在尝试构建一个程序，以帮助我将产品添加到特定网站，因此，为此，已使用jsp调用了产品（已经输入到数据库中）（我使用了可处理所有连接的自定义bean等）。 ）。
So far I have had the whole list of products be displayed on the screen when the page loads. 到目前为止，页面加载时，我已经在屏幕上显示了整个产品列表。
I used a mix of javascript and jsp when the search button is clicked (I know jsp is server side and javascript client, but here's what happens). 单击搜索按钮时，我混合使用了javascript和jsp（我知道jsp是服务器端和javascript客户端，但这是发生了什么）。
When i click the search button, for around a millisecond i can see that the search has displayed the correct result, but then the page refreshes immediately, and displays the whole list again, i have also inspected the code on the browser, and it shows that the result is being processed by the javascript function, but isn't being displayed.. 当我单击搜索按钮时，大约一毫秒我可以看到搜索显示了正确的结果，但是页面立即刷新，并再次显示整个列表，我还检查了浏览器中的代码，并显示了结果正在由javascript函数处理，但未显示。
Here's my code (excuse the bad programming technique, i'm new to this) 这是我的代码（不好的编程技术，这是我的新手）
<jsp:useBean id="Etn" scope="session" class="com.etn.beans.Contexte" />
<%@page import="com.etn.lang.ResultSet.Set" %>
<%@page import="java.io.BufferedReader" %>
<%@page import="java.io.IOException" %>
<%@page import="java.io.InputStreamReader" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product selection</title>
<link rel="stylesheet" type="text/css" href=" <%=request.getContextPath()%>/css/bootstrap__portal__.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.css"/>
<script src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script src="<%=request.getContextPath()%>/js/common.js"></script>
enter code here<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script>
<script>
function function1(){
document.getElementById('div1').innerHTML =
"<%
String abc=request.getParameter("s1");
if(abc==null){}
else{
Set rs2 = Etn.execute("select * from products where id = '"+abc+"'");
if(rs2.next()){
out.write(rs2.value("id")+" ");
out.write (rs2.value("image_name")+"<br>");
out.write(rs2.value("image_actual_name")+" ");
out.write
(rs2.value("product_type")+"<br><br>");
}
}
%>";
}
</script>
</head>
<body>
<div class ="container">
<center><h2> Search Product </h2></center>
<form action="index.jsp">
<br><br>
<div class ="col-sm-4">
<label> Search By ID </label>
<br>
<input name ="s1" id="e1" type ="text" class ="input-lg"/>
<button class="btn btn-primary" onclick="function1();">Search</button>
<br>
</div>
</form>
<div id="div1">
<%
Set rs = Etn.execute("select * from products");
while(rs.next()){
%><div><%
out.write(rs.value("id")+" ");
out.write (rs.value("image_name")+"<br>");
out.write(rs.value("image_actual_name")+" ");
out.write(rs.value("product_type")+"<br><br>");
}
%>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2016-07-27 08:40:24
Because it is a submit button in a form and that is what submit buttons do. 因为它是表单中的提交按钮，所以提交按钮就是这样做的。
You can return false from the onclick function to stop the normal behaviour of the submit button (ie submitting the form). 您可以从onclick函数return false ，以停止提交按钮的正常行为（即，提交表单）。
In the sprit of unobtrusive JS you should make the server side code be handle to handle the form submission correctly when the JS fails . 在不干扰JS的精神下，应使服务器端代码得到处理，以在JS失败时正确处理表单提交。
解决方案2
0 2016-07-27 08:40:39
It is because your button is submitting the form and therefore triggering a new request, which reloads the page. 这是因为您的button正在提交表单，因此触发了新请求，从而重新加载了页面。 You could either add type='button' to the button or return false from your function1() 您可以在type='button'添加type='button'或从function1() return false
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.