JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

JSP页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax无刷新三级联动</title><%
MemberDal md = new MemberDal(); //实例化封装的数据库操作类ArrayList<Member> al1 = md.getMember(0); //获取第一级地区数据%><script type="application/javascript" src="jquery/jquery-1.11.3.js"></script><script type="text/javascript">function yijChangeJson()
{    //Jquery Ajax  get方法异步请求调用数据         URL(第一级地区ID参数) + 回调函数
    $.get("jsonMembers?parentid=" + $("#yij").val() + "&nocache=" + new Date().getTime(),function(data,status){//解析JSON  获取数组var array = eval(data);var erj = document.getElementById("erj");//清空下拉列表
        erj.options.length = 1;//遍历数据for(var i = 0; i < array.length; i++){//更改option标签内容和value
            erj.options.add(new Option(array[i].name, array[i].id));            }//清空第三级下拉列表var sanj = document.getElementById("sanj");sanj.options.length = 1;})
}function erjChangeJson()
{   //Jquery Ajax  get方法异步请求调用数据          URL(第二级地区ID参数) + 回调函数
    $.get("jsonMembers?parentid=" + $("#erj").val() + "&nocache=" + new Date().getTime(),function(data,status){//解析JSON  获取数组var array = eval(data);var sanj = document.getElementById("sanj");//清空下拉列表
        sanj.options.length = 1;//遍历数据for(var i = 0; i < array.length; i++){//更改option标签内容和value
            sanj.options.add(new Option(array[i].name, array[i].id));            }})
}</script></head>
<body><form>
一级地区:
<select id="yij" name="yij" onchange="yijChangeJson()">
<option value="0">未选择</option>
<%
if(al1 != null)
{
for(Member m : al1)  //遍历获取第一级地区数据集合并在option标签内输出
{out.append("<option value='"+m.getId()+"'>"+m.getName()+"</option>");
}
}
%>
</select>
二级地区：
<select id="erj" name="erj"  onchange="erjChangeJson()"><option value="0">未选择</option>
</select>三级地区：
<select id="sanj" name="sanj" ><option value="0" selected>未选择</option></select></body>
</html>

servlet

package com.hanqi;import java.io.IOException;
import java.util.ArrayList;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.hanqi.dao.Member;
import com.hanqi.dao.MemberDal;import com.alibaba.fastjson.*;//引入JSON的jar包

@WebServlet("/jsonMembers")
public class jsonMembers extends HttpServlet {private static final long serialVersionUID = 1L;public jsonMembers() {super();}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");    response.setContentType("text/html; charset=UTF-8");String parentid = request.getParameter("parentid");//接收ajax发送参数
        MemberDal md = new MemberDal();  //实例化封装的数据库操作类if(parentid != null && parentid.trim().length() > 0){int i = Integer.parseInt(parentid);//数据类型转换
            String s = "";try{ArrayList<Member> al = md.getMember(i); //根据参数查询数据获取集合if(al != null){s = JSON.toJSONString(al); //将集合以字符串形式存入JSON
                }} catch (Exception e) {e.printStackTrace();}response.getWriter().append(s);//把JSON数据发送给JSP
        }} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub
        doGet(request, response);}}

转载于:https://www.cnblogs.com/OldZhao/p/5067067.html

JAVA EE 中之AJAX 无刷新地区下拉列表三级联动相关推荐

Ajax省市地区下拉列表三级联动
SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]([Id] [int] NULL,[Name] [varchar](50) NULL,[order ...
jQuery框架+DWR框架实现的Java Web中的Ajax效果（异步请求，局部刷新）
一简介和实现效果这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了 ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
ajax和php二级联动,jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图]
jQuery+php+mysql,轻松实现ajax无刷新省市二级联动[多图] 08-15栏目:技术 TAG:zxfy zxfy 用jQuery的ajax方法,结合PHP,轻松实现省市级的二级联动: h ...
ajax无刷新留言板远吗,基于jquery实现ajax无刷新评论
基于jquery实现ajax无刷新评论发布于 2017-03-31 11:26:07 | 75 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框架jQuery是一个 ...
ajax无刷新评论的思路,ajax学习——ajax版无刷新评论（数据库）
//Comment.htm 无刷新评论 type="text/javascript"> //加载评论 $(function() { $.post("GetComme ...
html5拖拽图片批量ajax无刷新进度上传
1.前端拖拽图片之前有篇文章说到HTML5的拖拽(drag.drop,详见:/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and ...
ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面留言内容中为空,或者为灰色的"没有填 ...
一起谈.NET技术，ASP.NET MVC2.0在Tab页中实现异步无刷新分页
概述很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...

JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

JAVA EE 中之AJAX 无刷新地区下拉列表三级联动相关推荐

最新文章

热门文章