Ajax二级联动简单实例
效果图：
图1
图2（浙江省内存在山东省的数据，原因是先前加入的数据未删除）
思路：通过下拉省份，将省份id传入后台，根据省份塞入相应省份的市的数据，将市的数据再次传回前端
前端HTML及JS代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadInfo(){
var shengId=document.getElementById("sheng").value;
shi.options.length=0; // 页面加载前先删除所有市下拉框的选项，避免原先加入的市同时存在，即避免图二的情况出现
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");
for(var i=0;i<dataObj.rows.length;i++){
var o=dataObj.rows[i];
shi.options.add(new Option(o.text,o.id));
}
}
};
xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true); xmlHttp.send();
}
</script>
</head>
<body>
省：
<select id="sheng" onchange="loadInfo()">
<option value="1">江苏省</option>
<option value="2">山东省</option>
<option value="3">浙江省</option>
</select>
市
<select id="shi">
</select>
</body>
</html>
后台servlet代码：
public class GetAjaxInfoServlet extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String action=request.getParameter("action");
if("checkUserName".equals(action)){
this.checkUserName(request, response);
}else if("ejld".equals(action)){
this.ejld(request, response);
}
}
private void checkUserName(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
String userName=request.getParameter("userName");
JSONObject resultJson=new JSONObject();
if("jack".equals(userName)){
resultJson.put("exist", true);
}else{
resultJson.put("exist", false);
}
out.println(resultJson);
out.flush();
out.close();
}
private void ejld(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out=response.getWriter();
String shengId=request.getParameter("shengId");
JSONObject resultJson=new JSONObject();
JSONArray jsonArray=new JSONArray();
JSONObject temp=null;
//以下为根据省ID模拟该省的市的数据
switch(Integer.parseInt(shengId)){
case 1:{
temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
break;
}
case 2:{
temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
break;
}
case 3:{
temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
break;
}
}
resultJson.put("rows", jsonArray);
out.println(resultJson);
out.flush();
out.close();
}
}
Servlet在web.xml中的配置：
<servlet>
<servlet-name>getAjaxInfoServlet</servlet-name>
<servlet-class>com.XXXXX.web.GetAjaxInfoServlet</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>getAjaxInfoServlet</servlet-name>
<url-pattern>/getAjaxInfo</url-pattern>
</servlet-mapping>
Ajax二级联动简单实例的更多相关文章
- ajax二级联动代码实例
//二级联动 $(function () { var _in_progress = false; function check_in_progress() { if (_in_progress == ...
- asp.net DropDownList无刷新ajax二级联动实现详细过程
只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...
- 份-城市，基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】
package loaderman.provincecity; import java.io.IOException; import java.util.LinkedHashSet; import j ...
- Asp.Net下，基于Jquery的Ajax二级联动
最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...
- Ajxa验证用户和二级联动的实例(五)
验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- ajax 二级联动与springmvc 交互
html 测试可以使用 <div class="pageButton" style="height: 60px;margin: 10px;line-height: ...
- Ajax实现局部数据交互的一个简单实例
想要实现的功能:利用Ajax技术通过点击一个<button>按钮,然后在指定的文本框中输出想要的值. 1.使用Jsp创建一个前端页面. <body> <div style ...
- js-day04--Ajax应用--二级联动
Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...
- Query实例的ajax应用之二级联动的后台是采用php来做的
jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment ...
随机推荐
- JSP基础--三大指令
JSP指令 1 JSP指令概述 JSP指令的格式:<%@指令名 attr1=”” attr2=”” %>,一般都会把JSP指令放到JSP文件的最上方,但这不是必须的. JSP中 ...
- Java单链表
一.概述 二.主方法 //创建头结点 private HeroNode head = new HeroNode(-1,null,null); //计数器,用于id的自增 private static ...
- P4929 【模板】舞蹈链（DLX）
题目背景 本题是舞蹈链模板——精确覆盖问题 题目描述 给定一个N行M列的矩阵,矩阵中每个元素要么是1,要么是0 你需要在矩阵中挑选出若干行,使得对于矩阵的每一列j,在你挑选的这些行中,有且仅有一行的第 ...
- Spark链接hive时 “HikariCP” 问题
IDE本地调试和spark-shell调试报错: Caused by: org.datanucleus.exceptions.NucleusUserException: The connection ...
- D Dandan's lunch
链接:https://ac.nowcoder.com/acm/contest/338/D来源:牛客网 题目描述 As everyone knows, there are now n people pa ...
- Centos7防火墙常用命令
有些人安装的linux的系统默认防火墙不是iptables,而是firewall,那就得使用以下方式关闭防火墙了. >>>关闭防火墙 systemctl stop firewalld ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- 让 Git Bisect 帮助你
让 Git Bisect 帮助你 英文原文:Letting Git Bisect Help You Git 提供来很多的工具来帮助我们改进工作流程. bisect 命令就是其中之一, 虽然由于使用 ...
- 攻防世界--getit
测试文件:https://adworld.xctf.org.cn/media/task/attachments/8ef2f7ef55c240418f84b3c514a7a28a 准备 得知 64位文件 ...
- python3使用print打印带颜色的字符串
一.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就是033 ...