ajax req.getsession() 获取不到_[AJAX] -AJAX,你要学的,都在这儿(案例小剧场-搜索框提示(经典))...

ajax之搜索框关键字提示语：

功能需求：

用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。

用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。

技术分析：

ajax技术+servlet+jsp+mybatis

功能分析(思路)：

1、创建搜索界面(搜索框和提示语div和搜索按钮)

2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求请求当前用户输入的信息对应的提

示语数据

3、将提示语数据填充到搜索框下的div中

问题：

现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求，请求提示语

数据。

解决：

判断用户单击的键盘的按键符合要求再发请求。

解决：

获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取

4、实现使用鼠标选择提示语

5、实现使用键盘的上和下键选择提示语

6、实现鼠标和键盘的联动操作

7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div

完善：

问题1：

只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。但是其实只需要最后一次进行请求发生即可。

解决1:

使用延迟发送请求。

使用1：

window.setTimeout

问题2：

event对象在火狐浏览器中使用window.event获取不到。

解决2:

在获取浏览器中使用传参的方式给event进行赋值。

使用：参照源码即可

数据库设计：

创建表:(data) 存储了常用的关键字数据

关键字编号：id

关键字数据：title

说明：remark

搜索次数:count(本次省略,一般是用来匹配搜索最多的内容取前面的

添加测试数据:要求前期测试数据为英文单词,后期会补充

SQL语句设计:

查询以用户当前搜索框数据开头的关键字

select * from t_data where title like 'a%'

注意：

测试数据不要太多。

数据库实现：

在数据库中创建表即可,并添加测试数据。

数据库设计代码

create

页面代码jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>

servlet

package

service

public

serviceimpl

public

mapper

public

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lin.mapper.SearchMapper"><select id="selLikeSearch" resultType="com.lin.pojo.SearchData">select * from t_data<where><if test="sd != null and sd != ''"><bind name="sd" value="sd+'%'"/>and title like #{sd}</if></where></select></mapper>