搜索展示---网上商城Web

今天介绍第二个业务点搜索展示，其实也是用户在输入框输入关键词，我们拿到关键词去数据库搜索，把搜索的结果展示给用户，提高搜索的精度

---

我们要做的就是以下的效果，输入关键词，展示相关搜索结果

搜索引擎搜索展示

网上商城的搜索展示

前端页面
搜索这块做出form表单，可利用ajax访问服务器。下拉列表做出div，没输入时候就隐式状态，输入后从服务器拿到数据，就把数据向div中展示

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();
						var content = "";
						// 2.去数据库中模糊查询
						$.ajax({
							type: "POST",
							url: "${pageContext.request.contextPath}/searchWord",
							data: {"word":word},
							async: true,
							dataType:"json",
							success: function(data){
								if(data.length>0){
									for(var i=0;i<data.length;i++){
										content+="<div style='padding:5px;cursor:pointer' οnclick='clickFn(this)' οnmοuseοver='overFn(this)' οnmοuseοut='outFn(this)'>"+data[i]+"</div>";
									// cursor:"pointer" 设置为小手
									}
									$("#showDiv").html(content);
									$("#showDiv").css("display","block");
								}
							},
							error:function () {
								alert("失败");
							}
						});}

后端Servlet层

获取到关键词word

   //获得关键字
        String word = request.getParameter("word");

把关键词word提交到service层
因为我们拿到的肯定商品的信息，所以需要封装到Product中。Product与前面的User一样，都是用来封装数据用的，Product属性应该与数据库中商品的字段保证一致。

public class Product {

	/*`pid` varchar(32) NOT NULL,
	  `pname` varchar(50) DEFAULT NULL,
	  `market_price` double DEFAULT NULL,
	  `shop_price` double DEFAULT NULL,
	  `pimage` varchar(200) DEFAULT NULL,
	  `pdate` date DEFAULT NULL,
	  `is_hot` int(11) DEFAULT NULL,
	  `pdesc` varchar(255) DEFAULT NULL,
	  `pflag` int(11) DEFAULT NULL,
	  `cid` varchar(32) DEFAULT NULL*/
	
	private String pid;
	private String pname;
	private double market_price;
	private double shop_price;
	private String pimage;
	private String pdate;
	private int is_hot;
	private String pdesc;
	private int pflag;
	private String cid;
	
	public String getPid() {
		return pid;
	}
	public void setPid(String pid) {
		this.pid = pid;
	}
	public String getPname() {
		return pname;
	}
	public void setPname(String pname) {
		this.pname = pname;
	}
	public double getMarket_price() {
		return market_price;
	}
	public void setMarket_price(double market_price) {
		this.market_price = market_price;
	}
	public double getShop_price() {
		return shop_price;
	}
	public void setShop_price(double shop_price) {
		this.shop_price = shop_price;
	}
	public String getPimage() {
		return pimage;
	}
	public void setPimage(String pimage) {
		this.pimage = pimage;
	}
	public String getPdate() {
		return pdate;
	}
	public void setPdate(String pdate) {
		this.pdate = pdate;
	}
	public int getIs_hot() {
		return is_hot;
	}
	public void setIs_hot(int is_hot) {
		this.is_hot = is_hot;
	}
	public String getPdesc() {
		return pdesc;
	}
	public void setPdesc(String pdesc) {
		this.pdesc = pdesc;
	}
	public int getPflag() {
		return pflag;
	}
	public void setPflag(int pflag) {
		this.pflag = pflag;
	}
	public String getCid() {
		return cid;
	}
	public void setCid(String cid) {
		this.cid = cid;
	}
}

Product的属性与方法

//查询该关键字的所有商品
        ProductService service = new ProductService();
        List<Object> productList = null;
        try {
            productList = service.findProductByWord(word);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }

service层把业务提交到dao层

//	根据关键字查询商品
	public List<Object> findProductByWord(String word) throws SQLException{
		ProductDao dao =new ProductDao();
		return dao.findProductByWord(word);
}

dao层根据关键词word去数据库中模糊查询

    public List<Object> findProductByWord(String word) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from product where pname like ? limit 0,5";//第一个?是初始值，第二个？是查多少数据
		List<Object> query = runner.query(sql, new ColumnListHandler("pname"), "%"+word+"%");
		return query;
	}

我们这里只需要拿到pname即商品的名称即可

经过dao层、service层回传数据，servlet层拿到数据，对数据进行处理，然后在前端页面上展示
servlet层拿到数据后，需要转换为json格式的字符串

//使用json的转换工具将对象或集合转成json格式的字符串---- jsonlib的方法
		//第一种方式
		JSONArray fromObject = JSONArray.fromObject(productList);
		String string = fromObject.toString();
		System.out.println(string);
		//第二种方式
        Gson gson = new Gson();
        String json = gson.toJson(productList);
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(json);

---

代码地址,记得给我点上小星星