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完成一个简单的级联下拉菜单
  • swing 面板设置背景教程
  • Visual Studio解决方案资源窗口不见了怎么解决
  • 如何下载angularjs
  • Android studio怎么注释掉代码
  • 平均周转时间怎么算
  • 热门搜索
    手抄报国庆70周年 庆十一手抄报 快乐阅读手抄报内容 家庭文明公约手抄报 少先队员手抄报图片 有关诚信的手抄报 五四青年节手抄报内容 关于成语的手抄报 七十周年手抄报 世界地球日手抄报图片