站内搜索 简单粗暴放代码

站内搜索 简单粗暴放代码第一步:创建表单,放搜索框第二步:写JS第三步:在Web层创建Servlet,使用的gson转换的json格式,需要导包第四步:创建Service第五步:创建Dao,使用的C3P0和

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

第一步:

  创建表单,放搜索

    <form >
        输入用户名:<input type="text" id="username" >    
        <span id="usernameInfo"></span><br>
        <br>
        <div style="position:relative">
            <input id="search" type="text" placeholder="Search" onkeyup="searchWord(this)">         <button type="submit">Submit</button>
            <div id="showDiv" style="display:none;position:absolute;z-index:1000;background:#fff; width:141px;border:1px solid #ccc;"></div>
        </div>
    </form>

第二步:

  写JS

<script type="text/javascript">    
  function overFn(obj){
    $(obj).css("background","#DBEAF9");
  }
  function outFn(obj){
    $(obj).css("background","#fff");
  }                    
  function clickFn(obj){
    $("#search").val($(obj).html());
    $("#showDiv").css("display","none");
  }                    
   function searchWord(obj){
     //1、获得输入框的输入的内容
     var word = $(obj).val();
     //2、根据输入框的内容去数据库中模糊查询---List<Product>
     var content = "";
     $.post(
     "${pageContext.request.contextPath}/searchWord",
     {"word":word},
     function(data){
       //3、将返回的商品的名称 现在showDiv中
        if(data.length>0){
          for(var i=0;i<data.length;i++){
             content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i]+"</div>";
           }
        $("#showDiv").html(content);
        $("#showDiv").css("display","block");
        }
      },
      "json"
      );
  }
</script>

第三步:

  在Web层创建Servlet,使用的gson转换的json格式,需要导包

public class SearchWordServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {

        //获得关键字
        String word = request.getParameter("word");
        //查询改关键字的所有商品
        UserService service = new UserService();
        List<Object> userList = null;
        try {
            userList = service.findUserByWord(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //[{"username":"admin","phone":"17805054371","role":"超级管理员"...},{},{}...]
        //使用json的转换工具
        /*1、JSonlib
        JSONArray fromObject = JSONArray.fromObject(userList);
        String string = fromObject.toString();
        System.out.println(string);
    */    
        Gson gson = new Gson();
        String json = gson.toJson(userList);
        response.setContentType("texy/html;charset=UTF-8");
        response.getWriter().write(json);
    
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        doGet(request,response);
    }
}

第四步:

  创建Service

public class UserService {

    public List<Object> findUserByWord(String word) throws SQLException {
        UserDao dao = new UserDao();
        return  dao.findUserByWord(word);        
    }

}

第五步:

  创建Dao,使用的C3P0和DBUtils

public class UserDao {
    public List<Object> findUserByWord(String word) throws SQLException {
        QueryRunner runner = new QueryRunner(C3P0Utils.getDataSource());
        String sql = "select * from user where username like ? limit 0,8";
        List<Object> query = runner.query(sql,new ColumnListHandler("username"),"%"+word+"%");
        return query;
    }

}

第六步:

  完成并测试

站内搜索 简单粗暴放代码

  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168292.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 计算机传真,电脑收发传真

    计算机传真,电脑收发传真WindowsXP有一项免费的传真功能,用它可以轻松收发传真,不用再买传真机了,可以通过网络直接发送。这里将发传真的具体操作步骤介绍如下,你只要照着做,一定就会收发传真。还可以用他来做打印机!中文名电脑收发传真特点免费的传真功能系统WindowsXP优点可以实现移动办公用于做打印机电脑收发传真操作步骤编辑语音电脑收发传真安装传真组件在WindowsXP-F收发…

  • Navicat premium15 激活码【2022免费激活】2022.03.10

    (Navicat premium15 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1M2OME2TZY-eyJsaWNlb…

  • 大数据:数据采集平台之Apache Flume

    大数据:数据采集平台之Apache Flume大数据:数据采集平台之ApacheFlume官网:https://flume.apache.org/Flume是Apache旗下的一款开源、高可靠、高扩展、容易管理、支持客户扩展的数据采集系统。Flume使用JRuby来构建,所以依赖Java运行环境。Flume最初是由Cloudera的工程师设计用于合并日志数据的系统,后来逐渐发展用于处理流数据事件。Flume设计成一个分布式…

  • C语言fscanf和fprintf函数的用法详解

    C语言fscanf和fprintf函数的用法详解fscanf()和fprintf()函数与前面使用的scanf()和printf()功能相似,都是格式化读写函数,两者的区别在于fscanf()和fprintf()的读写对象不是键盘和显示器,而是磁盘文件。这两个函数的原型为:intfscanf(FILE*fp,char*format,…);intfprintf(FILE*fp,char…

    2022年10月19日
  • 微信小程序使用MQTT.js连接阿里云IoT物联网平台[通俗易懂]

    微信小程序使用MQTT.js连接阿里云IoT物联网平台[通俗易懂]前言最近公司要做物联网控制,觉得写app不能够兼容Android和iOS,于是选定了微信小程序来作为控制端,为了能够实时的监听到设备的状态变化,需要服务器能够主动推消息给小程序,一开始考虑了websocket,由服务器进行上报的数据监听,小程序使用websocket连接服务器接收消息,虽然能实现,但是加上业务逻辑之后就太复杂终归不好(因为服务器也是自己写–泪奔)于是想着,websocket既然…………………

  • 手把手教你搭建第一个Spring Batch项目

    手把手教你搭建第一个Spring Batch项目写在前面:我是「沸羊羊_」,昵称来自于姓名的缩写fyy,之前呕心沥血经营的博客因手残意外注销,现经营此账号。本人是个小菜,正向着全栈工程师的方向努力着,文章可能并不高产,也很基础,但每写一篇都在用心总结,请大佬勿喷。如果您对编程有兴趣,请关注我的动态,一起学习研究。感谢每位读者!文章目录一、概述二、实例1、新建springboot项目2、springboot项目配置一、概述SpringBatch是一个轻量级,全面的批处理框架。一个典型的批处理过程可能是:从数据库,文件或.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号