html搜索框判断跳转,搜索关键字：ajax实现；点击搜索到的会添加到搜索框内，点击搜索跳转页面；...

登录注册(记住密码)https://blog..net/n20164206199/article/details/86218384

搜索关键字点击显示到搜索框，搜索跳转页面  https://blog..net/n20164206199/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;

}

}