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

【问题标题】：instant search from database using ajax使用ajax从数据库中即时搜索
【发布时间】：2020-08-30 02:42:01
【问题描述】：

我正在尝试使用 jsp servlet、jquery(keyUp event) 和 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>");
}

【问题讨论】：

标签： java jquery ajax servlets jakarta-ee

【解决方案1】：

如果此输入公开了所有数据库条目，则意味着您在 search?nm= 上的 GET 请求会返回所有数据。

首先，您需要在您的后端上解决此问题。

同时，如果您需要避免这种情况，您可以像这样添加 FrontEND 条件：

$("#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'>

【讨论】：