Question

我正在尝试构建一个程序来帮助我将产品添加到特定的网站，所以为此，使用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>

Answer 1

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

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

在unobtrusive JS的精神中，您应该使服务器端代码处理正确处理表单提交when the JS fails。

Answer 2

这是因为您的button正在提交表单，因此会触发重新加载页面的新请求。您可以在按钮上添加type='button'，也可以从return false

添加function1()

单击搜索时为什么页面会刷新？

2 个答案: