今天介绍第二个业务点搜索展示,其实也是用户在输入框输入关键词,我们拿到关键词去数据库搜索,把搜索的结果展示给用户,提高搜索的精度
我们要做的就是以下的效果,输入关键词,展示相关搜索结果
搜索引擎搜索展示
网上商城的搜索展示
前端页面
搜索这块做出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);
代码地址,记得给我点上小星星