终于弄懂了这个级联，我去！必须得在博客记下来。

1, JS代码：

 $(document).ready(function(){

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

         adjustCountyDropDown();

     });

 });

 function adjustCountyDropDown(){

     var selectedCity= $("#select1").val();

     var county= $("#select2");

     if(selectedCity.length== 0){

         county.attr("disabled", true);

     }

     else{

         county.attr("disabled", false);

 　　　　 //ajax异步

         $.getJSON(

         'http://localhost:8080/TestStu/ajaxSelectCityTest',　　//ajax提交的地址，我这里是servlet文件

         {city: selectedCity},　　//传递的参数，将city这个参数传到ajaxSelectCityTest这个servlet

         function(data){　　//data为返回的数据

             county.empty();        //jQuery清空options

             county.append("<option value=''>Please Choose:</option>");

             $.each(data, function(i, value) {

                 county.append("<option value=" + value.add_county + ">" + value.add_county+ "</option>");

             });

         }

         );

     }

 }

2, 后台Servlet

package test.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.ruchi.dao.impl.addDaoImpl;

import com.ruchi.entity.addEntity;

import com.ruchi.util.ConnectionFactory;

import net.sf.json.JSONArray;

public class selectCity extends HttpServlet {

    private static final long serialVersionUID = 7609673947157450475L;

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doPost(req, resp);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html;charset=UTF-8");

        response.setHeader("Pragam", "No-cache");

        PrintWriter pw = response.getWriter();

        Connection con = ConnectionFactory.getInstance().makeConnection();

        try {

            List<addEntity> list = new ArrayList<addEntity>();

            // String city= ${Parameter.selectedCity};

            System.out.println("Before : ");

            String city = request.getParameter("city");　　//接收来自前端传来的参数，后面的这个 city 就是第一片JS代码的第18行传来的

            System.out.println("You Just Reciived: "+ city);　　

            addDaoImpl adi = new addDaoImpl();　　//以下为获取后台数据

            list = adi.getCountyByCity(con, city);  //list为获取的所有数据

            JSONArray jsonArray = JSONArray.fromObject(list); //jsonArray为list转为成的JSON数据

            System.out.println(jsonArray.toString());

            pw.print(jsonArray.toString());  //将jsonArray返回到前台 被第一片JS代码的第19行接收

        } catch (SQLException e) {

            e.printStackTrace();

        } finally {

            try {

                con.close();

            } catch (Exception e2) {

                e2.printStackTrace();

            }

            pw.close();　

        }

    }

}

3, JSP页面代码：

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

    pageEncoding="UTF-8"%>

    <%@page import="java.util.Date"%>

<!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>

    <script src= "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script src="ajaxTest.js"></script>

    <script src="ajaxSelectCityTest.js"></script>

</head>

<body>

    <center>

        <h2>级联</h2>

        <select id="select1">

            <option value="">Please Choose:</option>

            <option value="xiamen">xiamen</option>

            <option value="changsha">changsha</option>

            <option value="anyang">anyang</option>

            <option value="beijing">beijing</option>

        </select>

        <hr />

        <select id="select2">

            <option value=''>Please Choose:</option>

        </select>

    </center>

</body>

</html>

4, 当然还有一些javaBean代码，操作数据库代码以及web.xml配置文件没有贴出来。

欢迎交流！

jQuery+Ajax+Jsp做二级级联的更多相关文章

  1. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

  2. Jquery+Ajax下拉框级联查询

  3. jQuery - AJAX 级联变动

    此篇文章主要是用来记忆使用JQUERY+AJAX技术实现 二级级联变动 : 当第一个下拉框变动时,第二个下拉列表框中也将会随之变动. JSP: ---------------------------- ...

  4. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  5. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  6. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  7. jQuery Ajax用法

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  9. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

随机推荐

  1. stl 迭代子的失效

    迭代子是STL中很重要的特性,但是其很脆弱(我个人认为),因为使用它的条件很苛刻,一不小心就失效了.其在两中情况下可能会失效. 1．当容器有插入操作时 在初始化了迭代子后,如果容器有插入操作时,迭代子 ...

  2. elk 数据存储

    让我们在集群中唯一一个空节点上创建一个叫做blogs的索引,默认情况下,一个索引被分配5个主分片, 但是为了演示的目的, 我们只分配3个主分片和一个复制分片(每个主分片都有一个复制分片): PUT / ...

  3. 2013第四届蓝桥杯决赛Java高职高专组题目以及解法答案

    2013第四届蓝桥杯决赛Java高职高专组题目以及解法答案 不知不觉离决赛都过去一个月了,一直忙于各种事情,都忘记整理一份试题.当作回忆也好. 1. 标题:好好学习 汤姆跟爷爷来中国旅游.一天,他帮助 ...

  4. Candy----HDU4465----数学题

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4465 题目意思: 有两个箱子,每个箱子装有N个糖果 打开第一个箱子的概率是P,另外一个就是1-P 当小 ...

  5. HUD 4473 Exam

    题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=4473 题目意思 定义f(x) = 满足(a * b)|x的有序对(a,b)的个数. 然后输入一个n, ...

  6. ASP.NET之电子商务系统开发-2(购物车功能)

    一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对 ...

  7. ASP.NET Web编程

    runat="server"直接回交服务器,处理数据,又以数据加密后的hidden属性的input控件插入回去,实现表单的状态保存 ruant="server" ...

  8. BZOJ 1602: [Usaco2008 Oct]牧场行走( 最短路 )

    一棵树..或许用LCA比较好吧...但是我懒...写了个dijkstra也过了.. ---------------------------------------------------------- ...

  9. ButterKnife 绑定 RadioGroup

    原则上 ButterKnife 是不支持 RadioGroup 的, 可以通过以下方法添加RadioButton的点击事件: @OnClick({ R.id.radio_btn1, R.id.radi ...

  10. python自学笔记（十一）关于函数及书写格式

    1.函数是抽象的第一步       1.1 有关高压锅     1.2 函数是抽象出来的结构,是总结,是方法     1.3 多用函数     2.如何定义函数        2.1 def是关键词, ...