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 ...
随机推荐
- vc code 一个非常不错的插件
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer 这个是地址,前提下是安装了vc ...
- HttpUrlConnection工具类
package com.ligotop.core.utils; import com.ligotop.core.exceptions.BusinessException; import java.io ...
- UVA1626 括号序列 Brackets sequence（区间dp）
题目传送门(洛谷) 题目传送门(UVA) 解题思路 很显然是一个区间dp,当然记忆化搜索完全可以AC,这里说一下区间dp. 区间dp的重要特征就是需要枚举中间节点k 看一看这道题,用f[i][j] ...
- Codeforces 1080C 题解（思维+二维前缀和）
题面 传送门 题目大意: 有一个黑白的棋盘,现在将棋盘上的一个子矩形全部染成黑色,另一个子矩形全部染成白色 求染完色后黑,白格子的总数 分析 我们可以发现,对于一个(1,1)到(x,y)的矩形,若xy ...
- [转]云计算：SaaS、PaaS、IaaS、CaaS
http://blog.csdn.net/it_man/article/details/8441902 近两年来,随着云计算技术的飞速发展,越来越多的厂商意识到了它巨大的潜在价值.随着微软.IBM.G ...
- Springboot消除switch-case方法
Springboot消除switch-case方法 背景 最近,在使用springboot开发一个接口的时候,需要根据接收的请求事件类型,去执行不同的操作,返回不同的结果,基本逻辑如下: String ...
- 高阶函数map,filter,reduce的用法
1.filter filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组 let nums = [10,20,30,111,222,333] 选出nums中小于100的数: l ...
- rtp/rtcp
rtp/rtcp stack custom rtp ORTP UCL Common RTP library Bell Labs RTP Library jrtplib 1.custom rtp sen ...
- mysql02---客户端与服务器模型
目录 一.客户端与服务器模型 连接MySQL方式 总结: 二.MySQL服务器构成 三.MySQL的结构 一.客户端与服务器模型 1.mysql是一个典型的C/S服务结构 1.1 mysql自带的客户 ...
- Codecraft-17 and Codeforces Round #391 - A
题目链接:http://codeforces.com/contest/757/problem/A 题意:给定一个字符串,问你从这个字符串中选出一些字符然后重新排序后最多能组成多少个 Bulbasaur ...