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

随机推荐

队列和线程之GCD dispatch
1.dispatch_queue_create 创建队列开启异步线程(1,4,2,3) // 创建一个队列 dispatch_queue_t queue = dispatch_queue_creat ...
mysql修改表引擎Engine
修改my.ini,在[mysqld]下加上default-storage-engine=INNODB 其中红色字体部分是要指定的引擎名称.用sql语句修改已经建成表的引擎:alter table ta ...
maven项目运行报错invalid LOC header (bad signature)
切换到项目目录pom.xml文件夹执行以下命令: mvn test -e -X 找到出错信息进入目录删除文件. 在ide里面重新部署项目即可.
mysql数据库存储经度纬度
使用float或者double会自动四舍五入,用decimal(20,17)当然你用varchar也是可以的
pycharm 出现Process finished with exit code 0 或 Process finished with exit code -1
Process finished with exit code 0 意味着你的程序正常执行完毕并退出. 可以科普一下exit code,在大部分编程语言中都适用: exit code 0 表示程序执行 ...
c#dev tabcontrol 切换页面时注意的问题
先加一个代码 public void SetXtraTabPageVisible(DevExpress.XtraTab.XtraTabControl xtraTabControl, bool iIsV ...
PAT 1089 狼人杀-简单版（20 分）（代码+测试点分析）
1089 狼人杀-简单版(20 分) 以下文字摘自<灵机一动·好玩的数学>:"狼人杀"游戏分为狼人.好人两大阵营.在一局"狼人杀"游戏中,1 号玩家 ...
OSGI引入Spring DM实现对服务对象的管理
一.异同熟悉Spring的应该也都了解它的IOC的功能,那么对于在OSGI开发环境下,在使用IOC功能时有什么不同呢?最重要的一点就是Spring上下文对象,每个Spring-Powered Bun ...
高级设计总监的设计方法论——5W1H需求分析法 KANO模型分析法
本期开始进入设计方法论的学习,大湿自己也是边学边分享,算是巩固一遍吧: 另外这些理论基本都是交叉结合来应用于工作中,我们学习理论但不要拘泥于理论的框架中,掌握后要灵活运用一点- 这些理论一部分来自于我 ...
MySQLdb与sqlalchemy的简单封装
一:MySQLdb # !/usr/bin/python # -*- coding: UTF-8 -*- import MySQLdb import MySQLdb.cursors import co ...

Ajax地域选择demo

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

随机推荐

热门专题