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

<servlet>
        <servlet-name>SearchServlet</servlet-name>
        <servlet-class>com.bjpowernode.controller.SearchServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>SearchServlet</servlet-name>
        <url-pattern>/searchProvince</url-pattern>
    </servlet-mapping>

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中加入一个<select>内容是省份名称, 通过onchange()事件,把所有省份名称添加到中。 把这个省份下的所有市名称添加到另一个<select>, 这叫做级联查询。

全部教程