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

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. 在输出视图中使用使用html注释会导致在Chrome中css失效

    在做SportsStore例子时,在视图List.cshtml中使用了html注释,即 <!-- 注释 --> 结果在加载css时,chrome浏览器中所有css效果都失效.IE不受影响. ...

  2. RHEL4-Partition Image系统备份(软件版)

    对于BBS,或Apache,PHP等相关网页的程序 备份: 1)/var/www/html目录,里面有PHP所写成的网页.此网页主要功能是从资料库中读取由信件存入的文章,或是使用者选择由网页输入资料时 ...

  3. 修改Eclipse的WorkSpace保持数[转载]

    最近用Eclipse开发特别多,我个人习惯每一个项目一个WorkSpace,这样的话代码干净.而且当项目之前编码规范不一样时,也不会彼此影响.但项目一多,Eclipse默认只保存5个WorkSpace ...

  4. 多线程中Local Store Slot(本地存储槽)

    在Java中有一种ThreadLocal机制,为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可以独立地改变自己的副本,而不会和其它线程的副本冲突.从线程的角度看,就好像每一个线程都完全 ...

  5. 部署nginx+rsyslog补丁

    nginx 配置: user nginx; worker_processes 1; syslog local5 nginx; error_log /var/log/nginx/nginx_error. ...

  6. HDU 5820 Lights（扫描线+zkw线段树）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5820 [题目大意] 在一个大小为50000*50000的矩形中,有n个路灯. 询问是否每一对路灯之 ...

  7. ZOJ 1698 (最大流入门）

    Power NetworkTime Limit:5000MS    Memory Limit:32768KB    64bit IO Format:%lld & %llu SubmitStat ...

  8. Open virtual effects in Ubuntu 12.04LTS

    Need install below packages: compiz compiz-core compiz-fusion-plugins-extra+ compiz-fusion-plugins-m ...

  9. 七日筑基——C#第一天（上）

    从今天开始,介绍C#如何入门,其实我们学习任何语言的目标都是为了最终能把自己想像的东西做出来,所以在最开始学习的时候要定准方向,很多人在学习过程中学着学着就变味了.比如我之前有个学生,最开始学习编程的 ...

  10. ASP.NET WebApi 简单记录

    //获取当前提交过来的Request对象 var request = System.Web.HttpContext.Current.Request;