Jquery的ajax页面请求响应

最新推荐文章于 2022-11-21 19:16:26 发布

Victorymh

最新推荐文章于 2022-11-21 19:16:26 发布

阅读量1k

点赞数

分类专栏：后端服务器

本文链接：https://blog.csdn.net/Victorymh/article/details/97108357

版权

后端服务器专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用Jquery的方法库，对页面的请求进行异步的响应。这里以三级下拉列表联动为案例。
省→市→县
1、当页面加载完成时，将所有的省数据加载到第一个下拉列表中
从该页面发起请求，请求服务器，服务器中的servlet通过jdbc查询mysql，将数据返回。

2、当从第一个下拉列表框中选中一个省时，将该省下的所有市加载到第二个下拉列表框中

3、当从第二个下拉列表框中选中一个市时，将该市下的所有县/区加载到第三个下拉列表框中

注意：需要导入对应的jquery.js包，mysql的jar包，以及json的jar包

一、新建一个bean包

该包下的代码用于层与层之间传输数据的载体。写对应的get/set方法和无参、带参构造方法。对应数据库表中的属性名。
在这里插入图片描述

二、创建一个Servlet包存放处理请求的响应代码

（为了看起来方便，这里没有使用到代码分层）
在这里插入图片描述
1、一级下拉列表代码：

package cn.test.serlvets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.test.bean.Province;

import com.alibaba.fastjson.JSON;
import com.sun.net.ssl.internal.ssl.Provider;

/**
 * Servlet implementation class GetProvince
 */
@WebServlet("/getp")
public class GetProvince extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置字符集
		response.setContentType("text/html; charset=utf-8");
		//查询数据库
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Province> plist = new ArrayList<Province>();
		try {
			Class.forName("com.mysql.jdbc.Driver");		//mysql 5.7及以下写法(获取驱动)
			String url = "jdbc:mysql://127.0.0.1:3306/sxk"; //连接数据库地址
			String user = "";				  //用户名
			String password = "";			  //密码
			conn = DriverManager.getConnection(url, user, password);
			ps = conn.prepareStatement("select * from t_address_province");
			rs = ps.executeQuery();
			while(rs.next()){
				int id = rs.getInt("id");
				String code = rs.getString("code");
				String name = rs.getString("name");
				Province po = new Province(id, code, name);
				plist.add(po);
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		//将plist集合转化为json格式的字符串
		//将字符串放入流中
		String jsonString = JSON.toJSONString(plist);
		//将字符串放入流中
		PrintWriter out = response.getWriter();
		out.write(jsonString);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

2、二级下拉列表代码：

package cn.test.serlvets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import cn.test.bean.City;

/**
 * Servlet implementation class GetCity
 */
@WebServlet("/getC")
public class GetCity extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置字符集
		response.setContentType("text/html; charset=utf-8");
		
		String pcode = request.getParameter("pcode");
		//查询数据库 select * from t_address_city where provincecode = ?
		
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<City> cList = new ArrayList<City>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			String url = "jdbc:mysql://127.0.0.1:3306/sxk";
			String user = "";
			String password = "";
			conn = DriverManager.getConnection(url, user, password);
			ps = conn.prepareStatement("select * from t_address_city where provinceCode = ?");
			ps.setString(1, pcode);
			rs = ps.executeQuery();
			while(rs.next()){
				int id = rs.getInt("id");
				String code = rs.getString("code");
				String name = rs.getString("name");
				String procode = rs.getString("provinceCode");
				City city = new City(id, code, name, procode);
				cList.add(city);
			}
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		//将List转化为json格式的字符串
		String jsonString = JSON.toJSONString(cList);
		//将json字符串通过流返回
		PrintWriter out = response.getWriter();
		out.write(jsonString);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

}

3、三级下拉列表代码

package cn.test.serlvets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

import cn.test.bean.Town;

/**
 * Servlet implementation class GetTown
 */
@WebServlet("/gett")
public class GetTown extends HttpServlet {
	private static final long serialVersionUID = 1L;
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=utf-8");
		
		String ccode = request.getParameter("ccode");
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<Town> tList = new ArrayList<Town>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			String url = "jdbc:mysql://127.0.0.1:3306/sxk";
			String user = "";
			String password = "";
			conn = DriverManager.getConnection(url, user, password);
			ps = conn.prepareStatement("select * from t_address_town where cityCode = ?");
			ps.setString(1, ccode);
			rs = ps.executeQuery();
			while(rs.next()){
				int id = rs.getInt("id");
				String code = rs.getString("code");
				String name = rs.getString("name");
				String citycode = rs.getString("cityCode");
				Town to = new Town(id, code, name, citycode);
				tList.add(to);
			}
			
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		String jsonString = JSON.toJSONString(tList);
		PrintWriter out = response.getWriter();
		out.write(jsonString);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

}

三、用户访问页面

（1）页面加载成功，通过jdbc连接数据库，查询表中数据，存放对象类中，对象类通过ResultSet结果集对sql语句的遍历，每遍历一次把数据存放到list集合中，把list集合转换为json格式的字符串，再把json格式的字符串放入流中返回给jsp页面。

（2）jsp页面把获取到的字符串转换为json对象，通过jquery的中的dom方法对json对象进行页面的修改。

（3）用户点击第一个下拉列表，通过onchange事件，执行第二个函数，以及类推。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
</head>
<body>
		 <!-- ajax方式发送请求：servlet必须通过流返回数据 -->
		 <!-- this.value获取的是当前id的value -->
	<select id="pid" onchange="getCity(this.value)">
		<option>--请选择--</option>
	</select>
	<select id="cid" onchange="getTown(this.value)">
		<option>--请选择--</option>
	</select>
	<select id="tid">
		<option>--请选择--</option>
	</select>
	
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
		//页面加载完成，执行一个函数
		/* window.onload = function(){
			
		} */
		$(function(){
			getPrvince()
		})
		function getPrvince(){
			$.ajax({
				"url":"getp",
				"type":"get",
				"success":function(data){
					var proArr = JSON.parse(data);
					for(var i = 0;i < proArr.length;i++){
						$("#pid").append("<option value='"+proArr[i].code+"'>"+proArr[i].name+"</option>")
					}
				}
			})
		}
		
		function getCity(provinceCode){
			$.ajax({
				url:"getC",
				"type":"get",
				data:{ "pcode" : provinceCode },
				success:function(data){
					var cityArr = JSON.parse(data);
					$("#cid").html("<option>--请选择--</option>");
					$("#tid").html("<option>--请选择--</option>");
					for(var i = 0;i < cityArr.length;i++){
						$("#cid").append("<option value='"+cityArr[i].code+"'>"+cityArr[i].name+"</option>")
					}
				}
			})
		}
		
		function getTown(cityC){
			$.ajax({
				url:"gett",
				"type":"get",
				data : { "ccode" : cityC },
				success : function(data){
					var tArr = JSON.parse(data);
					$("#tid").html("<option>--请选择--</option>");
					for(var i = 0;i < tArr.length;i++){
						$("#tid").append("<option value='"+tArr[i].code+"'>"+tArr[i].name+"</option>")
					}
				}
			})
		}
	</script>
</body>
</html>

Victorymh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery的ajax页面请求响应

使用Jquery的方法库，对页面的请求进行异步的响应。这里以三级下拉列表联动为案例。省→市→县1、当页面加载完成时，将所有的省数据加载到第一个下拉列表中从该页面发起请求，请求服务器，服务器中的servlet通过jdbc查询mysql，将数据返回。2、当从第一个下拉列表框中选中一个省时，将该省下的所有市加载到第二个下拉列表框中3、当从第二个下拉列表框中选中一个市时，将该市下的所有县/区加载...
复制链接

扫一扫