ajax常用案例,AJAX实例

AJAX实例

用户页面发起一个请求， 使用servlet输出数据到jsp

练习使用HttpServletResposne输出。pint

使用servlet输出一个字符串响应ajax请求

根据省份id查询省份名称

需求：用户在文本框架输入省份的编号id，在其他文本框显示省份名称

● 项目环境准备：

数据库：springdb

数据表：

● 省份信息表：

CREATE TABLE `province` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL COMMENT '省份名称',

`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',

`shenghui` varchar(255) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT

CHARSET=utf8;

● 城市信息表：

CREATE TABLE `city` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL,

`provinceid` int(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT

CHARSET=utf8;

表数据在课件资源目录\数据库文件\xxx.sql文件

● 项目结构：

项目是一个web应用， index.jsp发送请求， SearchServlet接收请求， 调用ProvinceDao从数据库获取指定id的省份名称。

实现步骤：

1.在idea新建 web application : 项目名称 ajaxweb

2. 配置tomcat服务器

3. 创建library

项目中需要访问数据库，需要加入myql驱动

第一步：点击“Project Structure”按钮

第二步：添加jar

第三步：Modules添加依赖库

在弹出的窗口选择上面创建的库mylib ，同时把tomcat库也加入到当前项目

4. 在index.jsp中创建XMLHttpRequest对象

定义表单：

创建XMLHttpRequest对象

5. 创建ProvinceDao访问数据库

方法定义：

定义变量：

访问数据库：

finally 关闭资源

返回结果：

6. 创建Servlet 处理请求，返回结果给XMLHttpRequest对象

7. web.xml文件注册SearchServlet

SearchServlet

com.bjpowernode.controller.SearchServlet

SearchServlet

/searchProvince

8. 部署项目，在浏览器访问应用

使用json作为数据交换格式

需求：根据省份编号id，查询省份的全部数据，数据格式json。

• 项目结构：

• 实现步骤：

1. 添加处理json的工具库

jackson：是非常有名的处理json的工具库。使用jackson可以实现java对象到json格式字符串的转换，也可以实现json字符串转为json对象。

添加jackson后

2.创建实体类Province

3.在ProvinceDao中增加方法，返回对象

方法定义：

数据库操作：

其他代码同selectProvinceName()方法。

4.创建新的Servlet对象

5.创建searchJson.jsp，获取json数据

表单定义：

AJAX请求处理：

6. 部署应用，浏览器访问

练习

1. 在文本框内输入省份名称中的某几个字，把符合条件的省份名称显示一个

2.在html中加入一个内容是省份名称， 通过onchange()事件，把所有省份名称添加到中。 把这个省份下的所有市名称添加到另一个, 这叫做级联查询。