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: ...

随机推荐

如何将你拍摄的照片转换成全景图及六面体（PTGui）
在完成全景照片的拍摄之后,接下来,我们需要的是进行全景图的拼接.全景图片分为两种类型1.立方体全景图(6面体)制作全景时通常使用该种格式如下图 2.球形图(2:1的单张全景图片)2:1全景图宽高比例 ...
Linux移植之移植步骤
在这里总结一下我在移植Linux2.6.22.6内核过程时的步骤.移植成功后最终能挂接做好的根文件系统,并且启动第一个init程序.移植的步骤如下: 1.将网上下载的内核源码文件linux-2.6.2 ...
8M - 三角形
用N个三角形最多可以把平面分成几个区域? Input 输入数据的第一行是一个正整数T(1<=T<=10000),表示测试数据的数量.然后是T组测试数据,每组测试数据只包含一个正整数N(1 ...
PAT 甲级1001 A+B Format (20)（C++ -思路）
1001 A+B Format (20)(20 分) Calculate a + b and output the sum in standard format -- that is, the dig ...
guide dpdk
Welcome to DPDK Guide! Contents: Setting up DPDK Important Prerequisites Setting up repositories Red ...
如何快速学好Shell脚本？
Shell 语言作为类 Unix 系统的原生脚本,有着非常实用的价值.但对于很多刚刚接触 Shell 脚本的同学来说,搞懂 Shell 语言的语法却是一件非常困难的事情.甚至有人吐槽,或许没有谁能清楚 ...
js对象(BOM部分/DOM部分)
JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢概念 BOM(Browser Object Model)是指浏览 ...
从1~N中任选出三个数,最小公倍数最大
已知一个正整数N,问从1~N中任选出三个数,它们的最小公倍数最大可以为多少. 当n为奇数:n.n-1.n-2这是三个最大数,并且它们两两互质.因为连续的奇.偶.奇,互质.连续的两个数互质是因为它们的公 ...
android xml 解析汉字只出来一个字的问题
DocumentBuilderFactory factory = DocumentBuilderFactory .newInstance(); // 实例化DocumentBuilder factor ...
Spark的Rpct模块的学习
Spark的Rpct模块的学习 Spark的Rpc模块是1.x重构出来可,以前的代码中大量使用了akka的类,为了把akka从项目的依赖中移除,所有添加了该模块.先看下该模块的几个主要的类使用E ...

Ajax地域选择demo

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

随机推荐

热门专题