首页 / AJAX / Ajax实现二级联动
Ajax实现二级联动
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Ajax实现二级联动，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1874字，纯文字阅读大概需要3分钟。
内容图文
ajax02.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>二级联动</title>
<base href="<%=request.getContextPath()+"/"%>">
<script type="text/javascript">
var xhr;
function change(val) {
//发送Ajax的请求
//A、创建XHR对象
xhr =new XMLHttpRequest();
//B、和服务器建立连接
xhr.open("get","AjaxServlet2?val="+val,true);
//C、执行回调函数
xhr.onreadystatechange=process;
//D、发送数据
xhr.send(null);
}
function process() {
if(xhr.readyState==4&&xhr.status==200){
//'[篮球, 足球, 乒乓球]'
var text= xhr.responseText;
//'篮球, 足球, 乒乓球'
var t2= text.substring(1,text.length-1);
// ["抖音", " 快手", " YY直播"]
var t3= t2.split(",");
var s=document.getElementById("s");
//每次进入循环需要重置
s.innerHTML="<option>--请选择--</option>";
for(var i in t3){
s.innerHTML+='<option>'+t3[i]+'</option>';
}
}
}
</script>
</head>
<body>
<select onchange="change(this.value)">
<option>--请选择--</option>
<option value="1">体育</option>
<option value="2">直播</option>
<option value="3">美食</option>
</select>
<select id="s">
<option>--请选择--</option>
</select>
</body>
</html>
AjaxServlet2.java
@WebServlet("/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解决响应中文乱码
resp.setContentType("text/html;charset=utf-8");
//接受数据
String val = req.getParameter("val");
List<String> list1=new ArrayList<>();
list1.add("篮球");
list1.add("足球");
list1.add("乒乓球");
List<String> list2=new ArrayList<>();
list2.add("抖音");
list2.add("快手");
list2.add("YY直播");
List<String> list3=new ArrayList<>();
list3.add("炒饼");
list3.add("炒面");
list3.add("抄刀削");
Map<String,List<String>> map =new HashMap<>();
map.put("1",list1);
map.put("2",list2);
map.put("3",list3);
//用户响应的集合
List<String> list = map.get(val);
resp.getWriter().print(list);
}
}
内容总结
以上是互联网集市为您收集整理的Ajax实现二级联动全部内容，希望文章能够帮你解决Ajax实现二级联动所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】