Jquery的实际的例子——仿百度的一个模糊查询的功能

整体项目的结构：

数据库口段的展示：

页面展示的效果：

采用普通的MVC的设计模式：

具体的模式类的设计：

Domain模型类：

package com.itheima.domain;

public class WordBean {

扫描二维码关注公众号，回复： 6186160 查看本文章

private int id;
private String words;

   public int getId() {
       return id;
   }

   public void setId(int id) {
       this.id = id;
   }

   public String getWords() {
       return words;
   }

   public void setWords(String words) {
       this.words = words;
   }

   @Override
   public String toString() {
       return "WordBean [id=" + id + ", words=" + words + "]";
   }

}

DAO的接口类：

package com.itheima.dao;

import java.sql.SQLException;
import java.util.List;

import com.itheima.domain.WordBean;

public interface WordsDao {

   /**
   * 用于检测用户名是否存在
   * @param username
   * @return true : 存在，false : 不存在
   * a
   * abc
   * admin
   * aaa
   */
   List<WordBean> findWords(String word) throws SQLException;
}

DAOImpl实现类：

package com.itheima.dao.impl;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.itheima.dao.WordsDao;
import com.itheima.domain.WordBean;
import com.itheima.util.JDBCUtil02;

public class WordsDaoImpl implements WordsDao {

   @Override
   public List<WordBean> findWords(String word) throws SQLException {
       QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
       String sql = "select * from words where words like ? limit ?";
       return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class), word + "%", 5);
   }

}

Servlet类别：

package com.itheima.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.itheima.dao.WordsDao;
import com.itheima.dao.impl.WordsDaoImpl;
import com.itheima.domain.WordBean;

/**
* Servlet implementation class FindWordsServlet
*/
public class FindWordsServlet extends HttpServlet {
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       request.setCharacterEncoding("utf-8");
       try {
           //1. 先获取参数
           String word = request.getParameter("word");
           System.out.println("word="+word);

           //2. 让dao执行查询
           WordsDao dao = new WordsDaoImpl();
           List<WordBean> list = dao.findWords(word);

           for (WordBean wordBean : list) {
               System.out.println("==="+wordBean.toString());
           }

           request.setAttribute("list", list);

           //3. 返回数据
           response.setContentType("text/html;charset=utf-8");
           //response.getWriter().write("数据是：");
//           响应这个jsp的页面，全部把它返回给请求者，请求：浏览器请求，浏览器看到jsp
           //$jquery ,来请
           request.getRequestDispatcher("list.jsp").forward(request, response);
       } catch (SQLException e) {
           e.printStackTrace();
       }

   }

   /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // TODO Auto-generated method stub
       doGet(request, response);
   }

}

前段界面的展示的：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

重要的额JS的代码：

//1. 捕捉到键盘弹起的事件
//在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
/*$(document).ready(function(){

})*/
$(function() {
   $("#word").keyup(function() {
       // 2。获取输入框的值
       // var word = $("#word").val();
       // this 对应就是执行这个方法的那个对象， $("#word")
       var word = $(this).val();

       if (word == "") {
           $("#div01").hide();
       } else {
           // 3. 请求数据。
           $.post("find", {
               word : word
           }, function(data, status) {
               // alert(data);
               $("#div01").show();//用于显示跳转的界面内容
               $("#div01").html(data);
           });
       }

})
});

跳转界面的内容：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<table style="width: 100%">
   <c:forEach items="${list }" var="wordBean">
       <tr>
           <td>${wordBean.words}</td>
       </tr>
   </c:forEach>
</table>

Jquery的实际的例子——仿百度的一个模糊查询的功能

猜你喜欢