搜索的功能的代码编写

1、编写显示数据的容器div2、实现ajax响应数据//创建XMLHttpRequest对象//通过事件调用回调函数处理响应结果，//创建一个服务器连接//发送请求<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>&l

御裔宸

4890人浏览 · 2018-09-06 14:52:18

御裔宸 · 2018-09-06 14:52:18 发布

1、编写显示数据的容器div

2、实现ajax响应数据

//创建XMLHttpRequest对象

//通过事件调用回调函数处理响应结果，

//创建一个服务器连接

//发送请求

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/my.js">
	
</script>
<script type="text/javascript">
	
	window.onload = function(){
		//得到搜索框对象
		var searchElement = document.getElementById("name");
		//得到DIV元素
		var div = document.getElementById("context1");
		
		searchElement.onkeyup = function(){//给文件框注册按键弹起事件
			//获取文本框的值
			var name = this.value;
			//如果文本框不没有数据时，把div隐藏，且不向服务器发送请求
			if(name==""){
				div.style.display="none";
				return;
			} 
			
			//获得xhr对象
			var xhr = getXMLHttpRequest();
			
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一 切正常
					if(xhr.status==200){//服务器响应一切正常
						var str = xhr.responseText;//得到服务器返回的数据
					
						var ss = str.split(","); // 把字符串 1001，1002，1003 截成数组
						var childDivs = "";
						//循环把数据放入小的div中
						for(var i=0;i<ss.length;i++){
							childDivs+="<div onclick='writeText(this)' onmouseover='changeBackground_over(this)' onmouseout='changeBackground_out(this)'>"+ss[i]+"</div>";//把数组中的每个元素放到div中
						}
						
						div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中
						div.style.display="block";//把列表隐藏
					}
				}
			}
			
			xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());
			
			xhr.send(null);
		}
	}
	
	//鼠标悬浮时，改变背景色
	function changeBackground_over(div){
		div.style.backgroundColor = "gray";
	}
	//鼠标离开时，恢复背景色
	function changeBackground_out(div){
		div.style.backgroundColor = "";
	}
	
	//填充文本到搜索框
	function writeText(div){
		//得到搜索框
		var searchElement = document.getElementById("name");
		searchElement.value = div.innerHTML;//把div中的文本添加到搜索框中
		div.parentNode.style.display="none";//把context1的div隐藏
	}
</script>

<div id="divmenu">
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=文学">文学</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=生活">生活</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=计算机">计算机</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=外语">外语</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=经营">经管</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=励志">励志</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=社科">社科</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=学术">学术</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=少儿">少儿</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=艺术">艺术</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=原版">原版</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=科技">科技</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=考试">考试</a>
	<a
		href="${pageContext.request.contextPath}/showProductByPage?category=生活百科">生活百科</a>
	<a href="${pageContext.request.contextPath}/showProductByPage"
		style="color:#FFFF00">全部商品目录</a>
</div>
<div id="divsearch">
	<form action="${pageContext.request.contextPath}/findProductBySearch"
		method="post">
		<table width="100%" border="0" cellspacing="0" >
			<tr>
				<td style="text-align:right; padding-right:220px">
				Search <input 
					type="text" name="name" class="inputtable" 
					id="name" autocomplete="on"/> <!-- 解决中文提交的问题 -->
					<input type="image" src="images/serchbutton.gif"
					border="0" style="margin-bottom:-4px">
				</td>
			</tr>
		</table>

	</form>
</div>
	<div id="context1" style="display:block;border:1px solid red;background-color:white; width:128px;position:absolute;left:860px;top:135px;">
		
	</div>

主要还是看怎么样处理那个搜索框的id与那个添加的事件，然后进行js的函数的调用。

第一步首先需要创建一个函数，需要得到对应的标签，然后怎么样利用这些标签进行判断，然后在进行对ajax里面的open的里面怎么样进行对参数进行发送到服务器，进行参数的传参数的。

window.onload = function(){
       //得到搜索框对象
       var searchElement = document.getElementById("name");
       //得到DIV元素
       var div = document.getElementById("context1");

       searchElement.onkeyup = function(){//给文件框注册按键弹起事件
           //获取文本框的值
           var name = this.value;
           //如果文本框不没有数据时，把div隐藏，且不向服务器发送请求
           if(name==""){
               div.style.display="none";
               return;
           }

第二步就是

就是请求加上服务器响应返回的结果，我们是怎么样进行对那些数据进行的处理，显示给前端的页面告诉客户是怎么样的

//获得xhr对象
           var xhr = getXMLHttpRequest();

           //处理结果
           xhr.onreadystatechange = function(){
               if(xhr.readyState==4){//请求一切正常
                   if(xhr.status==200){//服务器响应一切正常
                       var str = xhr.responseText;//得到服务器返回的数据

                       var ss = str.split(","); // 把字符串 1001，1002，1003 截成数组
                       var childDivs = "";
                       //循环把数据放入小的div中
                       for(var i=0;i<ss.length;i++){
                           childDivs+="<div οnclick='writeText(this)' οnmοuseοver='changeBackground_over(this)' οnmοuseοut='changeBackground_out(this)'>"+ss[i]+"</div>";//把数组中的每个元素放到div中
                       }

                       div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中
                       div.style.display="block";//把列表隐藏
                   }
               }
           }

div.innerHTML= childDivs;//把多个childDivs（div）放入列表div中
div.style.display="block";//把列表隐藏

这里的标签的代码就是怎么样设置的前端显示的风格的页面的。

第三步

xhr.open("get","${pageContext.request.contextPath}/servlet/searchBookAJAXServlet?name="+name+"&time="+new Date().getTime());

第四步：

xhr.send(null);

2、然后在进行servlet的层

这个主要就是处理数据的请求与服务器的响应

package com.itheima.web.servlet;

import java.io.IOException;
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.domain.Book;
import com.itheima.service.BookServiceImpl;

public class SearchBookAJAXServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");//只能解决post方式的乱码
		response.setContentType("text/html;charset=UTF-8");
		
		String name = request.getParameter("name");
		name = new String(name.getBytes("iso-8859-1"),"UTF-8");
		BookServiceImpl bs = new BookServiceImpl();
		List<Object> list = bs.searchBookByName(name);
		
		//把集合中的数据转换为字符串返回到网页
		String str = "";
		for (int i = 0; i < list.size(); i++) {
			if(i>0){
				str+=",";
			}
			str+=list.get(i);
		}
		
		System.out.println(str);
		//把数据响应到客户端
		response.getWriter().write(str);//str 1001,1002,1003
		
		
	}

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

}

主要意思就是，前端的ajax是怎么样请求那些数据传什么过来，然后我们怎么样去接住那些数据，然后怎么样利用这些数据，然后怎么样放进去dao的层里面的方法，然后怎么样去处理，然后怎么样

是怎么样判断是

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

第一步我们可以先设置客户端的请求的编码设置，还有与服务端的响应的设置。

       request.setCharacterEncoding("UTF-8");//只能解决post方式的乱码
       response.setContentType("text/html;charset=UTF-8");
第二步我们就是怎么样去设置得到客户端的传过来的数据
       String name = request.getParameter("name");
       name = new String(name.getBytes("iso-8859-1"),"UTF-8");

然后怎么样利用那些dao的接口，然后怎么样创建对象，
BookServiceImpl bs = new BookServiceImpl();

然后我们怎么样把传过来的数据放进去那些方法里面进行处理
List<Object> list = bs.searchBookByName(name);

然后处理后，然后得到返回的数据是字段还是字符串还是集合，还是数组，然后我们需不需要转换，然后怎么样输出，然后给前端，然后他们怎么样才能显示出来。
       //把集合中的数据转换为字符串返回到网页
       String str = "";
       for (int i = 0; i < list.size(); i++) {
           if(i>0){
               str+=",";
           }
           str+=list.get(i);
       }

       System.out.println(str);

最后
       //把数据响应到客户端
       response.getWriter().write(str);//str 1001,1002,1003


   }

3、第三步就是serviser的层的处理

package com.itheima.service;

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

import com.itheima.dao.BookDaoImpl;
import com.itheima.domain.Book;
import com.itheima.domain.PageBean;

public class BookServiceImpl {
	//创建一个Dao对象
	BookDaoImpl bookDao = new BookDaoImpl();
	
	public List<Book> findAllBooks(){
		try {
			return bookDao.findAllBooks();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	//添加图书
	public void addBook(Book book){
		try {
			bookDao.addBook(book);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public Book findBookById(String id) {
		try {
			return bookDao.findBookById(id);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}

	public void updateBook(Book book) {
		try {
			bookDao.updateBook(book);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public void deleteBook(String id) {
		try {
			bookDao.delBook(id);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public void deleAllBooks(String[] ids) {
		try {
			bookDao.deleAllBooks(ids);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

	public List<Book> searchBooks(String id, String category, String name,
			String minprice, String maxprice) {
		try {
			return bookDao.searchBooks(id,category,name,minprice,maxprice);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}

	public PageBean findBooksPage(int currentPage, int pageSize) {
		
		try {
			int count  = bookDao.count();//得到总记录数
			int totalPage = (int)Math.ceil(count*1.0/pageSize); //求出总页数
			List<Book> books= bookDao.findBooks(currentPage,pageSize);
			
			//把5个变量封装到PageBean中，做为返回值
			PageBean pb = new PageBean();
			pb.setBooks(books);
			pb.setCount(count);
			pb.setCurrentPage(currentPage);
			pb.setPageSize(pageSize);
			pb.setTotalPage(totalPage);
			
			return pb;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return null;
	}

	public List<Object> searchBookByName(String name) {
		try {
			return bookDao.searchBookByName(name);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}

	

	
	
	
}

主要进行对那想有可能传进来的数据有可能发现什么异常的情况下，我们进行对异常进行处理，然后也是前提需要创建一个dao的层里面的对象，我们才可以进行调用，然后怎么样传什么数据进去。

第四步、dao底层的数据库的语句编写，理解的代码处理

package com.itheima.dao;

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

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

import com.itheima.domain.Book;
import com.itheima.util.C3P0Util;
import com.sun.org.apache.bcel.internal.generic.ARRAYLENGTH;

public class BookDaoImpl {
	
	/**
	 * 查找所有图书
	 * @return
	 * @throws SQLException
	 */
	public List<Book> findAllBooks() throws SQLException{
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		return qr.query("select * from book", new BeanListHandler<Book>(Book.class));
	}
	/**
	 * 添加图书信息
	 * @param book
	 * @throws SQLException
	 */
	public void addBook(Book book) throws SQLException{
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		qr.update("INSERT INTO book VALUES(?,?,?,?,?,?)",book.getId(),book.getName(),book.getPrice(),book.getPnum(),book.getCategory(),book.getDescription());
	}
	
	/**
	 * 
	 * @param id
	 * @return 
	 * @throws SQLException 
	 */
	public Book findBookById(String id) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		return qr.query("select * from book where id=?", new BeanHandler<Book>(Book.class),id);
	}
	
	/**
	 * 修改图书信息
	 * @param book
	 * @throws SQLException
	 */
	public void updateBook(Book book) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		qr.update("update book set name=?,price=?,pnum=?,category=?,description=? where id=?",
				book.getName(),book.getPrice(),book.getPnum(),book.getCategory(),book.getDescription(),book.getId());
		
		
	}
	/**
	 * 根据id删除图书
	 * @param id
	 * @throws SQLException 
	 */
	public void delBook(String id) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		qr.update("delete from book where id=?",id);
	}
	
	/**
	 * 批量删除
	 * @param ids
	 * @throws SQLException 
	 */
	public void deleAllBooks(String[] ids) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		Object[][] params = new Object[ids.length][];
		for (int i = 0; i < params.length; i++) {
			params[i] = new Object[]{ids[i]};//循环给每个一维数组中的元素赋值，值是id
		}
		qr.batch("delete from book where id=?", params );
	}
	
	/**
	 * 多条件查询图书
	 * @param id
	 * @param category
	 * @param name
	 * @param minprice
	 * @param maxprice
	 * @return
	 * @throws SQLException 
	 */
	public List<Book> searchBooks(String id, String category, String name,
			String minprice, String maxprice) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		String sql = "select * from book where 1=1";
		List list = new ArrayList();
		if(!"".equals(id.trim())){
			sql+=" and id like ?"; //  不能在这写%   %'1002'%
			list.add("%"+id.trim()+"%");// '%1002%'
		}
		
		if(!"".equals(category.trim())){
			sql+=" and category=?";
			list.add(category.trim());
		}
		
		if(!"".equals(name.trim())){
			sql+=" and name like ?";
			list.add("%"+name.trim()+"%");
		}
		
		if(!"".equals(minprice.trim())){
			sql+=" and price>?";
			list.add(minprice.trim());
		}
		if(!"".equals(maxprice.trim())){
			sql+=" and price< ?";
			list.add(maxprice.trim());
		}
		
		return qr.query(sql, new BeanListHandler<Book>(Book.class),list.toArray());
	}
	
	/**
	 * 得到总记录数
	 * @return
	 * @throws SQLException
	 */
	public int count() throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		long l =  (Long)qr.query("select count(*) from book", new ScalarHandler(1));
		return (int)l;
	}
	
	/**
	 * 查找分页数据
	 * @param currentPage
	 * @param pageSize
	 * @return
	 * @throws SQLException 
	 */
	public List<Book> findBooks(int currentPage, int pageSize) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		return qr.query("select * from book limit ?,?", new BeanListHandler<Book>(Book.class),(currentPage-1)*pageSize,pageSize);
	}
	
	/**
	 * 根据书名查找图书 模糊查询
	 * @param name
	 * @return
	 * @throws SQLException
	 */
	public List<Object> searchBookByName(String name) throws SQLException {
		QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
		return qr.query("select name from book where name like ?", new ColumnListHandler(),"%"+name+"%");
	}
}

一般dao层里面我们一般都有一个数据源。

也就是工具类，然后方便我们在dao层里面创建对象，然后怎么样去调用

QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());

   /**
   * 查找所有图书
   * @return
   * @throws SQLException
   */
   public List<Book> findAllBooks() throws SQLException{
       QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
       return qr.query("select * from book", new BeanListHandler<Book>(Book.class));
   }

我们的得到数据源的对象后，然后我们怎么样去调用那些数据库的增删改查的对象方法，然后在方法里面进行数据库的语句编写的。然后我们怎么样

   /**
   * 添加图书信息
   * @param book
   * @throws SQLException
   */
   public void addBook(Book book) throws SQLException{
       QueryRunner qr = new QueryRunner(C3P0Util.getDataSource());
       qr.update("INSERT INTO book VALUES(?,?,?,?,?,?)",book.getId(),book.getName(),book.getPrice(),book.getPnum(),book.getCategory(),book.getDescription());
   }

package com.itheima.util;

import java.beans.PropertyVetoException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.sql.DataSource;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class C3P0Util {
	//得到一个数据源
	private static DataSource dataSource = new ComboPooledDataSource();
	
	
	public static DataSource getDataSource() {
		return dataSource;
	}

	//从数据源中得到一个连接对象
	public static Connection getConnection(){
		try {
			return dataSource.getConnection();
		} catch (SQLException e) {
			throw new RuntimeException("服务器错误");
		}
	}
	
	public static void release(Connection conn,Statement stmt,ResultSet rs){
		//关闭资源
				if(rs!=null){
					try {
						rs.close();
					} catch (Exception e) {
						e.printStackTrace();
					}
					rs = null;
				}
				if(stmt!=null){
					try {
						stmt.close();
					} catch (Exception e) {
						e.printStackTrace();
					}
					stmt = null;
				}
				if(conn!=null){
					try {
						conn.close();//关闭
					} catch (Exception e) {
						e.printStackTrace();
					}
					conn = null;
				}
	}
	
}

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

基于docker的test-containers环境百宝箱

笔者语录：我开了个公众号【Java你我他】，欢迎大家关注。在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其主要针对测试领域、背靠Docker实现环境百宝箱功能。 test-containers：你要的环境，我都有~ 假设我们现在需要一个redis-clust