jsp+jquery+json+servlet二级联动

最新推荐文章于 2019-01-18 18:32:20 发布

wt598717394

最新推荐文章于 2019-01-18 18:32:20 发布

阅读量1.2k

点赞数

分类专栏： jquery+ajax+json

本文链接：https://blog.csdn.net/allenfancy/article/details/22218711

版权

jquery+ajax+json 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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.结果

wt598717394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp+jquery+json+servlet二级联动

1.所需要的json包 2.jsp前台代码 <%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My
复制链接

扫一扫

专栏目录