登录注册(记住密码)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;

}

}

html搜索框判断跳转,搜索关键字:ajax实现;点击搜索到的会添加到搜索框内,点击搜索跳转页面;...相关推荐

  1. linux之用 grep -r 关键字 快速搜索在目录下面的含有关键字的文件

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程 1.快速搜索在目录下面的含有关键字的文件 我们采用下面命令 cd directoriesgrep -r ...

  2. 唯品会关键字搜索商品API接口(item_search-按关键字搜索唯品会商品API接口),唯品会API接口

    一.唯品会关键字搜索商品API接口(item_search-按关键字搜索唯品会商品API接口),唯品会API接口接口可获取到宝贝标题,宝贝价格,宝贝ID,宝贝图片,优惠价,宝贝链接,卖家昵称,店铺所在 ...

  3. 百度搜索的一个联想搜索框是如何实现的利用AJAX实现

    实现类似于百度搜索的一个联想搜索框 效果图 考虑实现的步骤 1.创建相应的数据库并且存储数据 2.测试一下数据传输回来得搜索结果 3.模拟搜索页面 4.导入需要用到的JAR包和配置文件 5.在网页为输 ...

  4. php 微信pic_url,PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法...

    本文实例讲述了PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法.分享给大家供大家参考,具体如下: 用户发送关键字,搜索相应的图文进行回复. 模拟登陆就不说了 右键看"已发送&q ...

  5. vim 同一行内单字符搜索跳转(笔记)

    技巧 3:同一行内单字符搜索跳转 参考:Vim 实用技巧 - Practical Vim f接目标字符:如f+,搜索同一行内下一个+位置 ;的作用:跳转到下一个f搜索的位置 ,的作用:跳转到上一个f搜 ...

  6. 1688搜索新品API接口-(按关键字搜索新品数据API接口)

    一.1688搜索新品API接口-(按关键字搜索新品数据API接口)代码如下: 1.公共参数: 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) secre ...

  7. 阿里巴巴关键字搜索商品API接口(item_search-按关键字搜索商品接口),阿里巴巴搜索API接口

    阿里巴巴关键字搜索商品API接口(item_search-按关键字搜索商品接口),阿里巴巴搜索API接口可以获取到整个页面上看的到的数据,包括:商品ID,商品标题,商品图片,优惠价,价格,价格范围,销 ...

  8. vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示

    vue element el-table 表格搜索 搜索表格内容关键字标红 关键字高亮显示 最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...

  9. 判断一棵树是否是搜索二叉树 判断一棵树是否是完全二叉树

    package class_04;import java.util.LinkedList; import java.util.Queue; /*** * 判断一棵树是否是搜索二叉树* 判断一棵树是否是 ...

  10. html在网页中内嵌百度搜索,如何在我的网页内嵌一个百度搜索的网页

    满意答案 double0821 2016.05.18 采纳率:51%    等级:10 已帮助:1069人 网页内包含百度搜索框代码: 查看代码打印 01 02 function g(formname ...

最新文章

  1. 深入理解JVM(6)——类加载器
  2. 国内企业应如何实施ITSM
  3. boost::sloan_ordering用法的测试程序
  4. C++:String的写时拷贝
  5. html里嵌入语音,HTML5语音合成API语音/语言支持
  6. python socket模块作用_python之socket模块详解--小白博客
  7. 技术人专访:GrapeCity,技术老炮开启低代码新征程
  8. 河南大学计算机期末考试题,河南大学计算机与信息工程学院2008期末C#试题
  9. tensorflow之交叉熵
  10. iOS开发之Xcode项目文件自动展开问题的解决办法
  11. Linux vim字符串替换
  12. vdbench的作用_基于SSD的iSCSI target的建立和Vdbench测试
  13. HBuilder如何运行到MuMu模拟器教程
  14. cocos2d-x 音乐/音效设置
  15. lenovo服务器换系统重装系统_联想电脑重装系统详细步骤?
  16. 《动手学深度学习》组队学习打卡Task5——卷积神经网络进阶
  17. linux防火墙_专业的linux web应用防火墙国内排名推荐
  18. 操作系统——进程的状态与转换
  19. 相律公式表达式_第六章 相平衡主要公式及其适用条件
  20. 高等数学之极限的原理及易错题计算

热门文章

  1. Vue导出Excel数据表格
  2. 视频大数据技术在智慧城市建设中的应用
  3. 如何将视频转化为gif
  4. 芝麻小程序市场 - 小程序的二维码商店
  5. 关于WORD文档的读取乱码问题
  6. 图说Twitter简史 Twitter四周年回顾
  7. goland 中国 caisy qq Czx123456
  8. iOS开发之Objective-C(中级篇)-李飞-专题视频课程
  9. 利用c51单片机实现测频仪(基于proteus仿真)
  10. 基于Bluemix快速构建部署一款Java小程序——微博影响力分析器