您的位置: 首页  >  文章  >  Jquery的Ajax请求Action与Action响应数据实例，以及下拉表单三级联动实例。全代码可用

Jquery的Ajax请求Action与Action响应数据实例，以及下拉表单三级联动实例。全代码可用

分类: 文章 • 2023-03-23 11:52:08

1.Ajax请求action，各参数意义，及数据返回过程图：

绿色线为数据传去服务器过程：使用ajax的data参数

红色为服务器传回过程：使用ajax的success参数

坐上蓝框补充：post提交数据在HTTP 消息主体中发送。大小无限制，安全（当然https才是真的安全）

Jquery的Ajax请求Action与Action响应数据实例，以及下拉表单三级联动实例。全代码可用

项目结构图：

Jquery的Ajax请求Action与Action响应数据实例，以及下拉表单三级联动实例。全代码可用

Jsp页面：

<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
<title>下拉表单联动练习</title>
</head>
<body>
	<select id="province" onchange="findCity(this)">
	
	</select>
	
	<select id="city">
	
	</select>
	
	<select id="area">
	
	</select>
</body>
<script type="text/javascript">

		$.ajax({
			type:"get",
			async:true,
			url:"findProvince",
			dataType: 'json',
			success:function(Provincelist){
				var json=Provincelist;
				var optionstring ="";
				for(var item in json)
				{
				optionstring += "<option value=\""+ json[item].code
				+"\" >"+ json[item].name+"</option>";
				}
				jQuery('#province').html(optionstring);
			}
		}
		)
		
		function findCity(o){
			var cityId=o.value;
			$.ajax({
				type:"post",
				async:true,
				url:"findCity",
				data:{cityId:cityId},
				dataType: 'json',
				success:function(Citylist){
					var json=Citylist;
					var optionstring = "";
					for(var item in json){
					optionstring += "<option value=\""+ json[item].code 
					+"\" onclick='findArea(this)' >"+
					json[item].name+"</option>";
					}
					$('#city').html(optionstring);
				}
			}
			)
		}
		function findArea(o){
			var areaId=o.value;
			console.log(areaId)
			$.ajax({
				type:"post",
				async:true,
				url:"findArea",
				data:{areaId:areaId},
				dataType: 'json',
				success:function(Arealist){
					var json=Arealist;
					var optionstring = "";
					for(var item in json){
						optionstring += "<option value=\""+ json[item].code +"\" >"+ json[item].name+"</option>";
					}
					$('#area').html(optionstring);
				}
			}
			)
		}	
</script>
</html>

 

实体类：

省：

package entity;

import java.io.Serializable;

public class Area implements Serializable{
	private Integer id; 
	private Integer code;
	private String name; 
	private Integer citycode;
	
	public Area() {
		super();

	}
	public Area(Integer id, Integer code, String name, Integer citycode) {
		super();
		this.id = id;
		this.code = code;
		this.name = name;
		this.citycode = citycode;
	}
	public String toString() {
		return "Area [id=" + id + ", code=" + code + ", name=" + name + ", citycode=" + citycode + "]";
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getCode() {
		return code;
	}
	public void setCode(Integer code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getCitycode() {
		return citycode;
	}
	public void setCitycode(Integer citycode) {
		this.citycode = citycode;
	}
	
}

市：

package entity;

import java.io.Serializable;

public class City implements Serializable{
	private Integer id;
	private Integer code;
	private String name;
	private Integer provinceCode;	
	public City() {

	}
	public City(Integer id, Integer code, String name, Integer provinceCode) {
		super();
		this.id = id;
		this.code = code;
		this.name = name;
		this.provinceCode = provinceCode;
	}
	public String toString() {
		return "City [id=" + id + ", code=" + code + ", name=" + name + ", provinceCode=" + provinceCode + "]";
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getCode() {
		return code;
	}
	public void setCode(Integer code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getProvinceCode() {
		return provinceCode;
	}
	public void setProvinceCode(Integer provinceCode) {
		this.provinceCode = provinceCode;
	}
	
}

区：

package entity;
import java.io.Serializable;
public class Area implements Serializable{
	private Integer id; 
	private Integer code;
	private String name; 
	private Integer citycode;
	public Area() {
		super();

	}
	public Area(Integer id, Integer code, String name, Integer citycode) {
		super();
		this.id = id;
		this.code = code;
		this.name = name;
		this.citycode = citycode;
	}
	public String toString() {
		return "Area [id=" + id + ", code=" + code + ", name=" + name + ", citycode=" + citycode + "]";
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public Integer getCode() {
		return code;
	}
	public void setCode(Integer code) {
		this.code = code;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getCitycode() {
		return citycode;
	}
	public void setCitycode(Integer citycode) {
		this.citycode = citycode;
	}
}

名字查询数据库相关操作接口：（Mybatis会去实现这些接口）

package selectDao;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import entity.Area;
import entity.City;
import entity.Province;
public interface Address {

	public List<Province> findProvinceById();

	public List<City> findCityById(@Param("provinceID")Integer provinceID);

	public List<Area> findAreaById(@Param("cityID")Integer cityID);
}

Mybatis映射Dao方法配置表：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<!-- 用于操作selectDao的sql语句映射 -->
<mapper namespace="selectDao.Address">
	<select id="findProvinceById" resultType="entity.Province">
		SELECT 
			id,
			code,
			name
			FROM
			province
	</select>
	<select id="findCityById" resultType="entity.City">
		SELECT 
			id,
			code,
			name,
			provincecode
			FROM
			city 
			WHERE provincecode =#{provinceID}
	</select>
	<select id="findAreaById" resultType="entity.Area">
		SELECT 
			id,
			code,
			name,
			citycode
			FROM
			area 
			WHERE citycode=#{cityID}
	</select>
</mapper>

服务接口：

package service;
import java.util.List;
import entity.Area;
import entity.City;
import entity.Province;
public interface AddressService {
	/**
	 * 查询省
	 * @return
	 */
	public List<Province> findProvince();
	/**
	 * 查询市
	 * @return
	 */
	public List<City> findCity(Integer provinceID);
	/**
	 * 查询区
	 * @return
	 */
	public List<Area> findArea(Integer cityID);
}

服务实现：

package serviceImpl;
import java.util.List;
import entity.Area;
import entity.City;
import entity.Province;
import selectDao.Address;
import service.AddressService;
import util.MybatisUtil;
public class AddressServiceImpl implements AddressService{
	public List<Province> findProvince() {
		return MybatisUtil.getMapper(Address.class).findProvinceById();
	}
	public List<City> findCity(Integer provinceID) {
		return MybatisUtil.getMapper(Address.class).findCityById(provinceID);
	}
	public List<Area> findArea(Integer cityID) {
		return MybatisUtil.getMapper(Address.class).findAreaById(cityID);
	}
}

 

 下拉表单 请求的 Action：（负责省市区的查询）调用服务实现：

package action;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ActionSupport;
import serviceImpl.AddressServiceImpl;

public class SelectAction extends ActionSupport{
	private Integer provinceId;//‘省 ’id。提供set get方法，使得Ajax的post提交方式传输数据过来后并赋值给此成员属性
	private Integer cityId;
	/**
	 * 打开页面查询省
	 */
	public void findProvince() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");//响应数据有中文，设置一下响应编码
		try {
			PrintWriter out = response.getWriter();//建立输出流
			//获取市的数组，转成json字符串并且输出
			out.print(JSON.toJSONString(new AddressServiceImpl().findProvince()));
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	/**
	 * 根据省id查询市
	 */
	public void findCity() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");//响应数据有中文，设置一下响应编码
		try {
			PrintWriter out = response.getWriter();//建立输出流
			//根据省id获取市的数组，转成json字符串并且输出
			out.print(JSON.toJSONString(new AddressServiceImpl().findCity(provinceId)));
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	/**
	 * 根据市id查询区
	 */
	public void findArea() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");//响应数据有中文，设置一下响应编码
		try {
			PrintWriter out = response.getWriter();//建立输出流
			//根据市id获取区的数组，转成json字符串并且输出
			out.print(JSON.toJSONString(new AddressServiceImpl().findArea(cityId)));
			out.flush();//刷新（传输给前台）
			out.close();//关流
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	public Integer getProvinceId() {
		return provinceId;
	}
	public void setProvinceId(Integer provinceId) {
		this.provinceId = provinceId;
	}
	public Integer getCityId() {
		return cityId;
	}
	public void setCityId(Integer cityId) {
		this.cityId = cityId;
	}
}

Mybatis工具类：

package util;

import java.io.IOException;
import java.io.InputStream;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class MybatisUtil {
	private static SqlSessionFactory factory;
	static {
		InputStream in=null;
		try {
			in=Resources.getResourceAsStream("mybatis-config.xml");
			factory = new SqlSessionFactoryBuilder().build(in);
		}catch (Exception e) {
			e.printStackTrace();
			throw new RuntimeException("初始化工厂失败");
		}finally {
			try {
				in.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	private static ThreadLocal<SqlSession> tol =new ThreadLocal<SqlSession>();
	/**
	 * 从本地线程池 获取 会话，获取不到会话 则新建会话
	 * @return
	 */
	public static SqlSession openSession() {
		SqlSession sqlSession = tol.get();
		if (sqlSession==null) {
			sqlSession = factory.openSession();
			tol.set(sqlSession);
		}
		return sqlSession;
	}
	/**
	 * 释放资源
	 */
	public static void close() {
		SqlSession sqlSession = openSession();
		if (sqlSession!=null) {
			sqlSession.close();
			tol.remove();
		}
	}
	/**
	 * 获取Dao实现类的对象
	 */
	public static <T> T getMapper(Class<T> c) {
		SqlSession sqlSession = openSession();
		T t = sqlSession.getMapper(c);
		return t;
	}
	/**
	 * 提交事务
	 */
	public static void commit(){
		openSession().commit();
	}
	/**
	 * 回滚事务
	 */
	public static void rollback(){
		openSession().rollback();
	}
}

oracle数据库连接配置与mysql连接配置信息参数表：


jdbc.oracleDriver=oracle.jdbc.OracleDriver
jdbc.url=jdbc:oracle:thin:@localhost:1521:xe
jdbc.username=hr
jdbc.password=000000

jdbc.mysql.oracleDriver=com.mysql.jdbc.Driver
jdbc.mysql.url=jdbc:mysql://localhost:3306/mysql
jdbc.mysql.username=root
jdbc.mysql.password=ayp43520

oracle数据库连接配置与mysql连接配置表：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd" >
<configuration>
	<properties resource="jdbc.properties"></properties>
<!-- 	<settings>
		<setting name="cacheEnabled" value="true"/>
	</settings> -->
	
	<environments default="mysql">
		<environment id="oracle">
			<transactionManager type="JDBC"></transactionManager>
			<dataSource type="POOLED">
				<property name="driver" value="${jdbc.oracleDriver}"/>
				<property name="url" value="${jdbc.url}"/>
				<property name="username" value="${jdbc.username}"/>
				<property name="password" value="${jdbc.password}"/>
			</dataSource>
		</environment> 
		<environment id="mysql">
			<transactionManager type="JDBC"></transactionManager>
			<dataSource type="POOLED">
				<property name="driver" value="${jdbc.mysql.oracleDriver}"/>
				<property name="url" value="${jdbc.mysql.url}"/>
				<property name="username" value="${jdbc.mysql.username}"/>
				<property name="password" value="${jdbc.mysql.password}"/>
			</dataSource>
		</environment>   
	</environments>
	<mappers>
		<!-- Mapper for product -->
		<mapper resource="selectDao/AddressMapper.xml"></mapper>
	</mappers>
</configuration>

Struts2，action分发配置表：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<package name="p1" extends="struts-default">
		<action name="findProvince" class="action.SelectAction" method="findProvince"></action>
		<action name="findCity" class="action.SelectAction" method="findCity"></action>
		<action name="findArea" class="action.SelectAction" method="findArea"></action>
	</package>
</struts>

 

 

相关推荐