使用ajax从数据库中即时搜索

Question

我试图使用jsp servlet、jquery(keyUp事件)和ajax从数据库中进行即时搜索。

搜索是有效的，但是当我删除字符和搜索输入是空的时候，ajax代码会返回数据库中的所有数据。

前台

$(document).ready(function(){
 
    $("#name").keyup(function(){
   
        $.ajax({
            url: 'search',      
            dataType: 'html',
            type: 'get',
            data: 'nm='+$("#name").val(),
            success: function (result) {
                $("#div").html(result); 
            },
            error: function (result) { 
                $("#div").html("Error.") ;}
        });  
    }); 

后端

PrintWriter out = response.getWriter();
ResultSet  R=null;
String req="select * from client_alpha where 1=1";
           
if(request.getParameter("cin")!=null){
    req+= " and cin like upper('" + request.getParameter("cin") + "%')";
}
      
R=Myconnection.getcon().createStatement().executeQuery(req);

if (R.next() == false) {
    out.print("empty");
} else {
    out.print("<table>");
    do {
        out.print("<tr><td>" + R.getObject(1) + "</td><td>" + R.getObject(2) + "</td><td>" + R.getObject(3) + "</td><td>" + R.getObject(4) + "</td></tr>");
    } while (R.next());
    out.print("</table>");
}

Answer 1

如果这个输入暴露了所有的数据库条目，这意味着你的GET请求对搜索?nm=返回所有的数据。

首先，你需要修复这个问题在你的 后端.

同时，如果你需要避免这种情况，你可以添加一个 前端 这样的条件。

$("#name").keyup(function(){

   if ($(this).val() == '') return;
   
   console.log(`Showing Search Results for ${$(this).val()}`);
  
   $.ajax({
    url: 'search',      
    dataType: 'html',
    type: 'get',
    data: 'nm='+$("#name").val(),
    success: function (result) {
      $("#div").html(result); 
    },

    error: function (result) { 
        $("#div").html("Error.");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='name' value='test'>