手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

java中利用AJAX完成一个简单的级联下拉菜单

时间:2024-10-16 16:33:10

1、首先需要下载JSON相关的jar 包,js中使用json需要引入的源文件json.js以及调取servlet需要的servlet-api.jar

java中利用AJAX完成一个简单的级联下拉菜单

2、将jar包导入进开发项目中,这里我是直接在WEB-INF目录下创建了一个lib文件夹,将所有的包放入,然后再在project structure中module中添加lib文件夹,让项目加载这些jar包

java中利用AJAX完成一个简单的级联下拉菜单

3、在Web 目录下创建city.jsp其中先导入json.js备用,以及创建两个两个下拉框S1和S2,其中S1放入固定值3个城市,S2会随着S1选定的值而匹配在这个城市中的3个地区。

java中利用AJAX完成一个简单的级联下拉菜单

4、编写一个对象State,用于封装S2中的name和value。

java中利用AJAX完成一个简单的级联下拉菜单

5、创建servlet类TestAjax,其中写入根据下拉框S1传入的value,匹配3个地区。并以JSON格式返回。

java中利用AJAX完成一个简单的级联下拉菜单

6、在web.xml中注册servlet。

java中利用AJAX完成一个简单的级联下拉菜单

7、将调取的servlet完成后,就需要正式开始编写ajax异步调取了,首先由于浏览器内核的不同,需要先加个判断,一般这是针对于ie浏览器的。看是否能获取ajax对象。在city.jsp中编写响应js代码。

java中利用AJAX完成一个简单的级联下拉菜单

8、ajax调取的步骤为: 1.获取XMLHttpRequest对象; 2.调取open方法,传入请求方式(get/post),url,true;此时需要注意的是如果是post请求,需要对ajax对象设置请求头; 3.回调函数,ajax对象中的readyState为4且status为200表示调取成功。 4.send方法,如果是get请求,因参数是放在url后的,此时直接传null,如果是post请求时需要将请求参数放入send方法中,

java中利用AJAX完成一个简单的级联下拉菜单

9、启动tomcat,访问city.jsp,选择第一个下拉框,选择任意选项,第二个下拉框相应改变。

java中利用AJAX完成一个简单的级联下拉菜单
© 手抄报圈