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

随机推荐

微信小程序循环列表添加点击事件和样式
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使 ...
组委会正在为美团点评CodeM大赛的决赛设计新赛制
比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分.比赛采取锦标赛赛制,分轮次进行,设某一轮有 m 个人参加,那么参赛者会被分为 m/2 组,每组恰好 ...
MVC防止跨站攻击@Html.AntiForgeryToken()
ASP.NET MVC 中有个标签:@Html.AntiForgeryToken(),需要在页面中加入这个标签,然后在Actoin中加入特性[ValidateAntiForgeryToken]就可以了 ...
thinkphp两表联查并且分页
ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: $Model = new Model(); $sql = 'sel ...
Linux移植之子目录下的built-in.o生成过程分析
在Linux移植之make uImage编译过程分析中罗列出了最后链接生成vmlinux的过程.可以看到在每个子目录下都有一个built-in.o文件.对于此产生了疑问built-in.o文件是根据什 ...
oracle 异常错误处理
分类: Oracle 5.1 异常处理概念 5.1.1 预定义的异常处理 5.1.2 非预定义的异常处理 5.1.3 用户自定义的异常处理 5.1.4 用户定义的异常处理 5.2 异常错误传播 5.2 ...
session是什么
初识session,跟大家一起学习下 session是什么首先,我们需要知道session是什么.我们普遍将session称之为会话控制.说实在的,我现在也不清楚session到底算是什么.我个人认 ...
iOS.OpenSource.PopularProject
1. Core Plot Core Plot is a plotting framework for OS X and iOS. It provides 2D visualization of dat ...
BZOJ 1799 - [AHOI2009]self 同类分布 - 枚举数位DP
Description 找出$[L, R]$ 区间内有多少数, 各位数字和能整除原数 Solution 枚举每个可能的数字和, 进行数位DP即可 , 水爆 Code #include<cstd ...
Java Http接收中文乱码解决
当时url传递时,可用 byte[] bytes=reqdata_s.getBytes("ISO-8859-1"); String name=new String(bytes,&q ...

Ajax地域选择demo

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

随机推荐

热门专题