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 ...
随机推荐
- HTML批量修改——正则表达式实践
目录 1.问题描述 2.初步研究 3.进一步研究 3.1提取2.*中的序号* 3.2提取标题 3.3选取全文 3.4替换 参考资料 1.问题描述 如下所示的一段HTML代码: ... <h2 a ...
- Struts2+Ajax实现数据交互
1.导入jar包 struts核心包: json需要的包: 2.配置web.xml <filter> <filter-name>struts2</filter-name& ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- CodeChef GCD2
GCD2 Problem code: GCD2 Submit All Submissions All submissions for this problem are available. ...
- python学习第十八天计算机字符编码
人类语言和计算机语言二进制怎么沟通,最开始字符编码为ascii码对照表 包括数据和字母,没有汉字,中国自己搞了一套自己的编码 gb2312编码后来发展GBK编码,日本,韩国都,甚至台湾也搞自己的编码, ...
- 卷积神经网络CNN原理以及TensorFlow实现
在知乎上看到一段介绍卷积神经网络的文章,感觉讲的特别直观明了,我整理了一下.首先介绍原理部分. [透析] 卷积神经网络CNN究竟是怎样一步一步工作的? 通过一个图像分类问题介绍卷积神经网络是如何工作的 ...
- ForkJoin简单示例
import java.util.concurrent.ExecutionException; import java.util.concurrent.ForkJoinPool; import jav ...
- mongodb 自增序列实现
MongoDB没有像SQL数据库外开箱即用自动递增功能.默认情况下,它采用了12字节的ObjectId为_id字段作为主键来唯一地标识文档.然而,可能存在的情况,我们可能希望_id字段有一些其它的自动 ...
- 第03章 AOP前奏
第03章 AOP前奏 提出问题 ●情景:数学计算器 ●要求 ①执行加减乘除运算 ②日志:在程序执行期间追踪正在发生的活动 ③验证:希望计算器只能处理正数的运算 ●常规实现 ●问题 ○代码混乱:越来越多 ...
- Flutter日曆國際化
Flutter自带的日期选择器是showDatePicker,时间选择器是showTimePicker. 这两个选择器默认的显示效果都是英文的,我们是在中国,那么就需要将其显示成中文版的,这就涉及到F ...