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

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. 【LeetCode题意分析&解答】35. Search Insert Position

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  2. hdu 2565 放大的X

    题目: http://acm.hdu.edu.cn/showproblem.php?pid=2565 这个题很简单 但是很容易错,写来给自己一个警示把 首先在最后一个x后面没有空格,然后就是那个换行一 ...

  3. nyist0j 35 表达式求值

    题目链接:表达式求值 该题以前做过但是WA了,今天终于把他解决了,各种悲剧啊,又是考虑不周到啊................... 所以贴出来纪念一下,并作为一个警示 /**** ps:注意当遇到 ...

  4. 5_Navigation Bar

    5 // // ViewController.swift // Navigation Bar // // Created by ZC on 16/1/9. // Copyright © 2016年 Z ...

  5. 操作native window的QxtWindowSystem （好像是一个IM的一部分）

    http://libqxt.bitbucket.org/doc/0.6/qxtwindowsystem.html https://github.com/psi-plus/plugins/blob/ma ...

  6. mysql 函数执行权限

    mysql> show grants for query_all@'115.236.1x0.x'; +---------------------------------------------- ...

  7. Evernote Clearly :: Firefox 附加组件

    Evernote Clearly :: Firefox 附加组件 Evernote Clearly 10.1.1.2 作者: Evernote Evernote Clearly 可使博客贴文.文章和网 ...

  8. php 求水仙花数优化

    水仙花数是指一个n位数(n>=3),它每一个位上数字的n次幂之和等于它本身,n为它的位数.(比如:1^3+5^3+3^3 = 153) 水仙花数又称阿姆斯特朗数. 三位的水仙花数有4个:153, ...

  9. Linux（Debain）环境安装WordPress

    一.相关组件安装 1. 安装Apache apt-get install apache2 安装完毕后浏览器 http://localhost/ 或者 http://127.0.0.1 出现It Wor ...

  10. JavaSE_ 集合框架 总目录(15~18)

    JavaSE学习总结第15天_集合框架1 15.01 对象数组的概述和使用15.02 对象数组的内存图解15.03 集合的由来及与数组的区别15.04 集合的继承体系图解15.05 Collectio ...