1.所需要的json包
2.jsp前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.T_college"%>
<%@ page import="com.T_profession"%>
<%@page import="com.OperAjax"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ajaxTwo.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main_type").change(function(){
alert($(this).val());
mainTypeId=$(this).val();
$.getJSON("AjaxTwo?main_type="+mainTypeId,"",
function(data){
alert(data);
$("#second_type").show();
$("#second_type option").remove();
$.each(data,function(i){
$("#second_type").append("<option value="+data[i].pro_id+">"+data[i].pro_name+"</option>"); });
});
});
});
</script>
</head>
<body>
<%
List<T_college> listAllCollege = new OperAjax().getAllColleges();
%>
学院:
<select name="main_type" id="main_type">
<option value="0">--请选择--</option>
<%
for(int i=0;i<listAllCollege.size();i++){
T_college mainType= (T_college)listAllCollege.get(i);
int colid= mainType.getCol_id();
String colname= mainType.getCol_name();
%>
<option value="<%=colid %>"><%=colname%></option>
<%
}
%>
</select>
专业:
<select name="second_type" id="second_type" >
<option value="0">--请选择--</option>
</select>
</body>
</html>
3.Servlet代码
package com;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class AjaxTwo extends HttpServlet {
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int main_type_id=Integer.parseInt(request.getParameter("main_type"));
List<Profession> listST= new OperAjax().getProfessionsByCollegeId(main_type_id);
JSONArray object = JSONArray.fromObject(listST);
System.out.println(object.toString());
sendMsg(object.toString(), response);
}
public void sendMsg(String content,HttpServletResponse response)throws IOException{
response.setCharacterEncoding("utf-8");
PrintWriter out =response.getWriter();
out.write(content);
out.flush();
out.close();
}
}
4.运行
http://localhost:8080/TestjQueryAjaxJsonServlet/ajaxTwo.jsp
5.结果