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

随机推荐

go语言io和ioutil包的学习和使用
io包 package main; import ( "errors" "fmt" "io" ) //io包中定义了非常多的interfac ...
直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中
问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...
localstorage和vue结合使用
父组件 <template> <div class="hello"> <p>Original message:"{{message}} ...
Vue vue.extend 和vue.component 两则之间的区别
Vue.extend 返回的是一个扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个扩展实例构造器 ...
Windows下PythonQt编译（vs2015+Qt5.11.2+PythonQt 3.2）探索
时间:2018年10月20日笔者最近在做Qt方面的开发工作,需用到脚本程序对程序内部进行扩展,就很自然的想到了PythonQt,下面介绍PythonQt在Windows下的的安装编译心得,水平有限, ...
Android.Tools.Summary
Android平台上工具的总结每个工具的详细使用和深入理解参考每个工具相关的blog. 1. Android SDK中提供的工具 http://developer.android.com/tools ...
Codeforces 791B. Bear and Friendship Condition 联通快完全图
B. Bear and Friendship Condition time limit per test:1 second memory limit per test:256 megabytes in ...
android xml解析中的null问题
当我们从服务器或者xml文件加载xml进行解析的时候,往往报告 nullpointer 错误.这是原始代码: String short_name = doc.getElementsByTagName( ...
PS快捷键大全，记住这些就够了！
希望能帮到大家更好的学习.
DbUtils类的添加，修改，删除
package cn.jy.demo; import java.sql.Connection;import java.sql.SQLException; import org.apache.commo ...

Ajax地域选择demo

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

随机推荐

热门专题