爲什麼點擊搜索時頁面會刷新？

我正在嘗試構建一個程序，該程序可以幫助我將產品添加到特定的網站，因此，產品（已經輸入到數據庫中）正在使用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>

來源

2016-07-27 Meh

因爲它是一個表單中的提交按鈕，並且這是提交按鈕的作用。

您可以使用onclick函數return false來停止提交按鈕的正常行爲（即提交表單）。

在unobtrusive JS的精神，你應該使服務器端代碼處理，以正確處理表單提交when the JS fails。

來源

2016-07-27 08:40:24 Quentin

這是因爲您的button正在提交表單並因此觸發新的請求，重新加載頁面。您可以將type='button'添加到按鈕或return false從您的function1()

來源

2016-07-27 08:40:39

爲什麼點擊搜索時頁面會刷新？

回答

相關問題