登录注册(记住密码)https://blog..net/n4206199/article/details/86218384
搜索关键字点击显示到搜索框,搜索跳转页面https://blog..net/n4206199/article/details/86219679
发布二货跳转到添加界面
首页图片内容、分页的获取与显示 :https://mp..net/postedit/86216843
点击向上的手跳到顶部
输入2输入23x点击vivo x 23x点击搜索stepone:index.jsp
body
搜索
//点击搜索后的 js
function searching(){
var pid = $("#search-pid").val();
window.location.href="ProductDetailServlet?pid="+pid;
}
跳转界面:
searching():点击后转到Servlet层
package cn.trade.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.trade.daoimp.PhotoDaoImp;
import cn.trade.daoimp.ProductDaoImp;
import cn.trade.model.ProductBean;
import net.sf.json.JSONObject;
/**
* Servlet implementation class ProductDetailServlet
*/
@WebServlet("/ProductDetailServlet")
public class ProductDetailServlet extends HttpServlet {
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//获取pid
int pid = Integer.parseInt(request.getParameter("pid"));
//根据pid找到商品信息
ProductBean pro = new ProductDaoImp().findDetialById(pid);
//存商品信息
request.setAttribute("pro", pro);
//跳转到商品信息的界面
request.getRequestDispatcher("productdetail.jsp").forward(request, response);
}
}
搜索关键字的js
$(function(){
$("#search-window").keyup(function(){
$("#search-words").html("");
var word=$(this).val();
if(word!=""){
$.ajax({
method:"POST",
url:"KeyServlet",
data:{
"word":word
},
dataType:"JSON",
success:function(data){
$("#search-words").show();
$(data).each(function(index){
var str = '
'+this.ptitle+'
';
$("#search-words").append(str);
});
}
})
}else{
$("#search-words").hide();
}
})
})
function selValue(obj,pid) {
console.log(obj);
$("#search-window").val(obj);
$("#search-pid").val(pid);
$("#search-words").hide();
}
注意:str要注意格式:如果不是数字一定要加上'' 所以要注意转义符;
selValue(obj,pid){}是用来点击查询到的信息直接填入搜索框内
steptwo:后台的servlet层:KeyServlet
package cn.trade.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.trade.daoimp.KeywordDaoImp;
import cn.trade.model.Keyword;
import net.sf.json.JSONArray;
/**
* Servlet implementation class KeyServlet
*/
@WebServlet("/KeyServlet")
public class KeyServlet extends HttpServlet {
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String word = request.getParameter("word");
List list = new KeywordDaoImp().findAll(word);
/*request.setAttribute("list", list);
request.getRequestDispatcher("keylist.jsp").forward(request, response);*/
JSONArray jArray = JSONArray.fromObject(list);
String j = jArray.toString();
response.getWriter().write(j);
}
}
stepthree:进入Dao层找与输入框内文字有关的商品名
package cn.trade.daoimp;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import cn.trade.dao.KeywordDao;
import cn.trade.model.Keyword;
import cn.trade.util.DBUtil;
public class KeywordDaoImp implements KeywordDao {
@Override
public List findAll(String word) {
// TODO Auto-generated method stub
List list = new ArrayList<>();
Connection conn = DBUtil.getConn();
String sql = "SELECT pid,ptitle FROM tb_product"
+ " WHERE ptitle like ? limit 5";
try {
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, "%"+word+"%");
ResultSet rs = pstmt.executeQuery();
while(rs.next()){
Keyword k = new Keyword();
k.setPid(rs.getInt("pid"));
k.setPtitle(rs.getString("ptitle"));
list.add(k);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return list;
}
}
html搜索框判断跳转 搜索关键字:ajax实现;点击搜索到的会添加到搜索框内 点击搜索跳转页面;...