Ajax地域选择demo

index.jsp只用于转发到Servlet获得省份数据再转发到province.jsp

index.jsp

<%@ page language="java" contentType="text/html; UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<jsp:forward page="chinaServlet" >

   <jsp:param name="method" value="getProvinces"></jsp:param>

</jsp:forward>

</body>

</html>

province.jsp

<%@ page language="java" contentType="text/html; UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>

<title>Insert title here</title>

<%response.setCharacterEncoding("UTF-8"); %>

<script type="text/javascript">

   $(function() {

    $("#province").change(function() {

        $("#city option:not(:first)").remove();

        var url = "chinaServlet";

        var provinceId = $(this).val();

        //alert(provinceId);

        if(provinceId!=""){

        var json = {"method":"getCitys","provinceId":provinceId};

        $.post(url,json, function(data) {

            //alert(data[1].name);

            for(var i = 0;i<data.length;i++){

                $("#city").append("<option value="+data[i].cityId+">"+data[i].name+"</option>")

            }

        },"json")

      }

    });

})

</script>

</head>

<body>

  <select id="province">

    <option value="">请选择...</option>

    <c:forEach items="${requestScope.provinces }" var="provinces">

       <option value="${provinces.provinceId}">${provinces.name}</option>

    </c:forEach>

   </select>

   <select id="city">

    <option value="">请选择...</option>

   </select>

</body>

</html>

Servlet

package com.servlet;

import java.io.IOException;

import java.lang.reflect.InvocationTargetException;

import java.lang.reflect.Method;

import java.util.List;

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.dao.CityDao;

import com.dao.ProvinceDao;

import com.dao.impl.CityDaoImpl;

import com.dao.impl.ProvinceDaoImpl;

import com.domain.City;

import com.domain.Province;

import com.google.gson.Gson;

import com.sun.media.jfxmedia.events.NewFrameEvent;

/**

 * Servlet implementation class ChinaServlet

 */

@WebServlet("/chinaServlet")

public class ChinaServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public ChinaServlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

             doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String methodName = request.getParameter("method");

        System.out.println(methodName);

        try {

            Method method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);

            method.invoke(this, request,response);//反射获得方法

        } catch (NoSuchMethodException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        } catch (SecurityException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        } catch (IllegalAccessException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        } catch (IllegalArgumentException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        } catch (InvocationTargetException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

    public void getProvinces(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //得到省份数据

        ProvinceDao dao = new ProvinceDaoImpl();

        List<Province> provinces = dao.queryForList();

        System.out.println(provinces);

        request.setAttribute("provinces", provinces);

        request.getRequestDispatcher("/WEB-INF/pages/province.jsp").forward(request, response);

    }

    public void getCitys(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //等到城市数据

        String provinceId = request.getParameter("provinceId");

        System.out.println(provinceId);

        CityDao dao = new CityDaoImpl();

        List<City> cities = dao.queryByProvinceId(provinceId);

        //System.out.println(cities);

        Gson gson = new Gson();

        String json = gson.toJson(cities);

        //System.out.println(json);

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/javascript");

        response.getWriter().print(json);

    }   

}

Dao类方法不在这里贴了

 源码下载 http://files.cnblogs.com/files/lusufei/AJAX%E5%9C%B0%E5%9F%9F%E9%80%89%E6%8B%A9demo.zip

Ajax地域选择demo的更多相关文章

Ajax级联选择框
Ajax级联选择框级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...
原生ajax瀑布流demo
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...
联动选择通过ajax获取选择对应的数据
网站有时候需要这种联动然后获取到想对应的数据思路: 这种的话就是你每次选择哪一个就将这个设置一个标注表示你现在选择的是哪一个然后每选择一次就进行一次ajax查询,ajax里面有一个data里面添 ...
仿QQ发语音、图片选择、表情选择demo
一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git. 喜欢的请 star star star,共 ...
酒店移动端入住离店日期选择demo(转)
原作者:http://blog.csdn.net/cj14227/article/details/65629737 效果图: demo 代码: <!DOCTYPE html> <ht ...
js canvas压缩图片和jQuery ajax上传图片简单demo
原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...
Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
Ajax我选择这样入门
什么是AJAX? AJAX的意思就是异步的JavaScript和XML.简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言.它可以发送及接收各种格式的信息,包括JSON.XML ...
ajax提交数据Demo
$.ajax({ url: "url", type: "post", data: JSON.stringify(yourData), contentType: ...

随机推荐

（二）创建ROS工作空间
ROS 教程中涉及的和编写的所有 ROS 代码需要有一个地方存放它,这个地方叫做工作空间.可以说,这个工作空间应该是一个大的集合.当我们要编译程序的时候,我们是对整个工作空间进行编译的. 这个工作空 ...
无法连接到localhost。其他信息：用户“sa”登录失败。原因：该用户被禁用。（Microsoft Sql Server,错误：18470）.
18470错误: 解决方案: 使用windows身份验证登录之后,选择安全性--->登录名--->sa--->右击--->属性: 右击选择属性进入属性页面: 选择状态,然后再登 ...
python 面向对象编程之析构方法
析构方法:当对象在内存中被释放的时候,自动触发执行如果产生的对象仅仅只是用户级别的, 那么无需定义__del__,如果对象还会向操作系统发生系统调用, 即一个对象有用户级别与内核级两种资源, 比如打 ...
TCP窗口扩大选项
TCP窗口扩大选项(TCP Window Scale Option) TCP窗口扩大选项 TCP Window Scale Option (WSopt) 窗口扩大选项用于扩大TCP通告窗口,使TCP的 ...
10分钟搭建 App 主流框架
搭建主流框架界面 0.达成效果我们玩iPhone应用的时候,有没发现大部分的应用都是上图差不多的结构,下面的TabBar控制器可以切换子控制器,上面又有Navigation导航条我们本文主要是搭建 ...
Luogu2149 [SDOI2009]Elaxia的路线-最短路+拓扑排序
Solution 另外$ m <=5e5$. 两条最短路的最长公共路径一定是若干条连续的边, 并且满足拓扑序. 于是我们分别正向和反向走第二条路径,若该条边同时是两条最短路径上的边, 则 ...
关于发件人地址会自动增加BATV及prvs的问题处理方法
问题描述: 发现Exchange 2010往外发邮件时,有些用户的发件人地址会自动增加BATV= 及 prvs=绪如,这些的特定字符,变成型如prvs=123456=example@example.c ...
网页启用Gzip压缩提高浏览速度
启用Gzip压缩的好处它的好处显而易见,提高网页浏览速度,无论是之前说的精简代码.压缩图片都不如启用Gzip来的实在.下图为启用Gzip后的效果. Gzip压缩效率非常高,通常可以达到70%的压缩率 ...
cron Linux下的定时执行工具
说明:测试平台 Ubuntu 16.04.4 LTS cron是一个Linux下的定时执行工具,可以在无需人工干预的情况下运行作业.所以,在Linux中,周期性执行的任务一般由cron这个守护进程来 ...
[Robot Framework] 如何在Setup中用Run Keywords执行多个带参数的关键字
参考文档:http://www.howtobuildsoftware.com/index.php/how-do/bZ7q/robotframework-setup-teardown-robot-fra ...

Ajax地域选择demo

Ajax地域选择demo的更多相关文章

随机推荐

热门专题