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

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. 几本不错的开源书（to be continued）

    Linux 1.working-on-gnu-linux GNU/Linux 至今已經相當成熟並足以應付日常生活之使用,凍仁也於 2009 年開始使用它來工作至今,將藉由此書 1 來撰寫較有系統的文章 ...

  2. srand() rand() time(0)

    标准库<cstdlib>(被包含于<iostream>中)提供两个帮助生成伪随机数的函数: 函数一:int rand(void):从srand (seed)中指定的seed开始 ...

  3. 在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be closed first”

    在实体对象中访问导航属性里的属性值出现异常“There is already an open DataReader associated with this Command which must be ...

  4. ICT测试原理

    在线测试,ICT,In-Circuit Test,是通过对在线元器件的电性能及电气连接进行测试来检查生产制造缺陷及元器件不良的一种标准测试手段.它主要检查在线的单个元器件以及各电路网络的开.短路情况, ...

  5. Android Material Design 之 Toolbar的使用

    Material Design是谷歌提出来的最新ui设计规范,我想actionbar大家也许并不陌生,toolbar简单而言可以看做为actionbar的升级版,相比较actionbar而言,tool ...

  6. cocos2dx 坐标和锚点

    cocos2dx中使用opengl坐标系,左下角为坐标原点,在大部分情况下,都是使用这种坐标系的. 当我们创建了一个渲染对象到窗口后,那么这个对象本身也是也是有自己的坐标系的,这种坐标系是节点自己的坐 ...

  7. uva 719 Glass Beads（后缀自动机）

    [题目链接] https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=524&am ...

  8. POJ 1226 Substrings（后缀数组+二分答案）

    [题目链接] http://poj.org/problem?id=1226 [题目大意] 求在每个给出字符串中出现的最长子串的长度,字符串在出现的时候可以是倒置的. [题解] 我们将每个字符串倒置,用 ...

  9. Duanxx 的 STM32 学习： 中断向量表操作

  10. 无法在web服务器上启动调试，服务器不支持对ASP.NET 或ATL Server应用程序进行调试。

    无法在web服务器上启动调试,服务器不支持对ASP.NET 或ATL Server应用程序进行调试. a>.DCOM配置里的属性灰色不可用的解决方法,   1>.管理工具->组件服务 ...