jQuery+Ajax+Jsp做二级级联

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

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配置文件没有贴出来。

欢迎交流!

上一篇:Jmeter、Postman 、 loadrunner SoapUI 接口测试工具


下一篇:Spring源码学习之IOC容器实现原理(一)-DefaultListableBeanFactory