为什么当我点击搜索时页面会刷新

Why does page refresh when i click search?

本文关键字：刷新 搜索 为什么      更新时间：2023-09-26

我正在尝试构建一个程序，帮助我将产品添加到特定的网站，因此，使用jsp调用产品（已经输入数据库）（我使用了一个自定义bean来处理所有连接等）。

到目前为止，当页面加载时，我已经在屏幕上显示了整个产品列表。

当单击搜索按钮时，我混合使用了javascript和jsp（我知道jsp是服务器端和javascript客户端，但情况如下）。

当我点击搜索按钮时，在大约一毫秒的时间里，我可以看到搜索显示了正确的结果，但随后页面立即刷新，并再次显示整个列表，我还检查了浏览器上的代码，它显示javascript函数正在处理结果，但没有显示。。

这是我的代码（原谅糟糕的编程技术，我是新手）

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

因为它是表单中的提交按钮，这就是提交按钮的作用。

您可以通过onclick函数return false来停止提交按钮的正常行为（即提交表单）。

在不引人注目的JS的精神中，当JS失败时，你应该让服务器端的代码被处理来正确处理表单提交。

这是因为您的button正在提交表单，因此触发了一个新的请求，该请求将重新加载页面。您可以将type='button'添加到按钮，也可以从function1() 中添加return false

相关文章：