AJAX小项目

AJAX实现省市联动

• 什么是省市联动？

  • 在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。（首先要清楚需求）

• 进行数据库表的设计

  • t_area （区域表）
    id(PK-自增)	  code		name		pcode
    ---------------------------------------------
    1				001		 河北省		null
    2				002		 河南省		null
    3				003		 石家庄	    001
    4				004		 邯郸			 001
    5				005		 郑州			 002
    6				006		 洛阳			 002
    7				007		 丛台区	    004  
    
    将全国所有的省、市、区、县等信息都存储到一张表当中。
    采用的存储方式实际上是code pcode形势。

• 建表t_area，模拟好数据。

• 首先实现第一个功能：

  • 页面加载完毕之后，先把省份全部展现出来。

AJAX实现搜索联想 自动补全

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