AJAX——AJAX实现搜索联想自动补全、HTTP状态信息

&＃x1f4c4;个人主页&＃xff1a;胖虎不秃头
✨个人简介&＃xff1a;Java领域新星创作者&＃xff0c;随时准备跑路的大二学生
&＃x1f525;精品专栏&＃xff1a;有这一个就够了
&＃x1f308;个人名言&＃xff1a;知道的越多&＃xff0c;不知道的越多
&＃x1f4a5;刷题神器&＃xff1a;推荐一款算法刷题网站Nowcoder&＃x1f449;点击跳转刷题网站进行注册学习

AJAX实现搜索联想 自动补全

• 什么是搜索联想&＃xff1f;自动补全&＃xff1f;
  • 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候&＃xff0c;会有搜索联想以及自动补全。
  • 搜索联想和自动补全&＃xff1a;实际上是为了方便用户的使用。让用户的体验更好。
  • 搜索联想&＃xff1a;当用户输入一些单词之后&＃xff0c;自动联想出用户要搜索的信息&＃xff0c;给一个提示。
  • 自动补全&＃xff1a;当联想出一些内容之后&＃xff0c;用户点击某个联想的单词&＃xff0c;然后将这个单词自动补全到搜索框当中。
  • 搜索联想和自动补全功能&＃xff0c;因为是页面局部刷新效果&＃xff0c;所以需要使用ajax请求来完成。
• 搜索联想&＃xff0c;自动补全功能的核心实现原理&＃xff1f;
  • 当键盘事件发生之后&＃xff0c;比如&＃xff1a;keyup&＃xff1a;键弹起事件。
  • 发送ajax请求&＃xff0c;请求中提交用户输入的搜索内容&＃xff0c;例如&＃xff1a;北京&＃xff08;发送ajax请求&＃xff0c;携带“北京”两个字&＃xff09;
  • 后端接收到ajax请求&＃xff0c;接收到“北京”两个字&＃xff0c;执行select语句进行模糊查询。返回查询结果。
  • 将查询结果封装成json格式的字符串&＃xff0c;将json格式的字符串响应到前端。
  • 前端接收到json格式的字符串之后&＃xff0c;解析这个json字符串&＃xff0c;动态展示页面。

附录&＃xff1a;HTTP状态信息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客户端错误

5xx: 服务器错误