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;
				}
	}
	
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

# ajax
Logo
向您推荐>>Eolink开发者社区

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

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

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

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

avatar 云原生