前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
来源:互联网 发布:淘宝pc客户端登入 编辑:程序博客网 时间:2024/04/26 08:05
首先是使用注解的方式操作
在页面上 :
<select name="province" class="province" id="province">
<option value="0">----请选择省份----</option></select>
<select name="city" class="city" id="city">
<option value="0">------请选择城市-----</option>
</select>
使用jQuery
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:'test/select.do',
data:{},
type:'get',
success:function(data){
$(data).each(function(index){
$("#province").append(
'<option value="'+data[index].pid+'" id="'+index+'">'+data[index].province+'</option');
});
}
});
$("#province").bind("change",function(){
var pid=$(this).val();
//每点一次就清空一次
$("#city").html('<option value="0">----请选择省份----</option>');
/* $.post("test/secondSelect.do",
{"pid":pid},
function(data){
$(data).each(function(index){
$("#city").append(
'<option value="'+data[index].cid+'">'+data[index].city_name+'</option>'
);
});
}); */
$.ajax({
url:'test/secondSelect.do',
data:{"pid":pid},
type:'post',
success:function(data){
$(data).each(function(index){
$("#city").append(
'<option value="'+data[index].cid+'">'+data[index].city_name+'</option>'
);
});
}
});
});
});
</script>
使用mvc模式
在controller层获取数据
@RequestMapping(value="/select.do")
@ResponseBody
public Object select(){
List<Province> list=(List<Province>) service.selectProvinceFromDB();
return list;
}
@RequestMapping(value="/secondSelect.do")
@ResponseBody
public Object secondSelect(HttpServletRequest request){
String pidStr = request.getParameter("pid");
Integer pid = Integer.valueOf(pidStr);
List<City> list=service.secondSeclectFromDB(pid);
System.out.println(list.size());
return list;
}
在dao层时使用mapper映射 其中id名称为dao中的方法名 ,因为二级联动,所以会有外键,所以结果应该使用resultMap
<?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">
<mapper namespace="com.ssm.dao.IStudentDao">
<resultMap type="Student" id="studentmapper">
<id column="id" property="id"/>
<result column="name" property="name"/>
<result column="age" property="age"/>
</resultMap>
<select id="selectStudent" resultMap="studentmapper">
select id from student where name=#{0} and age=#{1}
</select>
<!-- ============================================================= -->
<select id="selectProvince" resultType="Province">
select pid,province
from province
<!-- <if test="list!=null and list.size>0">
where pid in
<foreach collection="list" open="(" close=")" item="pro" separator=",">
#{pro.pid}
</foreach>
</if> -->
</select>
<select id="findAllCity" resultType="City">
select cid,city_name(字段名) from city where p_id=#{pid}
</select>
</mapper>
配置文件
spring-tx.xml
<!--注册事务管理器 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource"/>
</bean>
<!-- <tx:advice id="advice" transaction-manager="transactionManager">
<tx:attributes>
<tx:method name="find*" isolation="DEFAULT" propagation="REQUIRED"/>
</tx:attributes>
</tx:advice>
<aop:config>
<aop:pointcut expression="execution(* *..service.*.*(..))" id="pointcut"/>
<aop:advisor advice-ref="advice" pointcut-ref="pointcut"/>
</aop:config> -->
以下是注解方式
<tx:annotation-driven transaction-manager="transactionManager"/>
spring-service.xml
<context:component-scan base-package="com.ssm.service"/>
<!-- spring-mvc-xml-->
spring-mvc-xml
<context:component-scan base-package="com.ssm.handlers"/>
<!--开启注解驱动 使用了ajax 对于json格式,需要转换器 -->
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
</mvc:message-converters>
</mvc:annotation-driven>
<!--将springmvc不能处理的交给tomcat处理 -->
<mvc:default-servlet-handler/>
spring-mybatis.xml
注册sqlSessionFactotyBean
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
指定mybatis主配置文件的位置
<property name="configLocation" value="classpath:resources/mybatis.xml"/>
</bean>
注册mapper扫面配置器
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
指定基本包
<property name="basePackage" value="com.ssm.dao"/>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
</bean>
jdbc.properties
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://127.0.0.1:3306/test
jdbc.user=root
jdbc.password=160216
spring-db.xml
注册数据源:c3p0数据源
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
<property name="driverClass" value="${jdbc.driver}"/>
<property name="jdbcUrl" value="${jdbc.url}"/>
<property name="user" value="${jdbc.user}"/>
<property name="password" value="${jdbc.password}"/>
</bean>
注册册jdbc属性文件
<context:property-placeholder location="classpath:resources/jdbc.properties"/>
mybatis.xml
<configuration>
别名
<typeAliases>
<package name="com.ssm.beans"/>
</typeAliases>
mapper位置
<mappers>
<package name="com.ssm.dao"/>
</mappers>
</configuration>
如有错误,欢迎指正,正在学习中
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- 异步获取数据Ajax,以及对获取的数据进行绑定(显示在页面上)
- 异步获取数据Ajax,以及对获取的数据进行绑定(显示在页面上)
- AJAX获取数据然后显示在页面
- 前台页面json的二级联动
- 页面上的二级联动
- 前台页面获取map集合并且遍历显示
- SSM框架jsp页面俩个参数作为查询条件查值显示在页面上
- 使用ajax实现二级联动
- 在laravel中使用ajax实现二级联动
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- MUI框架Ajax获取数据然后在列表显示
- 动态二级下拉框联动(二级数据从数据库中获取)
- 使用ajax将后台数据输出到前台,实现页面动态化
- 使用echart从后台获取数据动态显示到页面
- 获取父页面的数据,并且hidden到页面上
- SpringMVC+Ajax用FormData对象上传页面的图片(文件),并且立马在页面上显示出来
- Struts2的Action向JSP传输List集合并且将数据显示在页面上
- mysql5.7.20-winx64.zip安装
- MySQL 性能优化神器 Explain 使用分析
- 蓝桥杯-----------基础训练--贪心Huffman树、字母图形--讲解
- Gitlab坚持用云的原因
- provider 定义服务
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- 我认为必须要学的前端技能和架构体系
- 如何查看AD域账号的删除记录
- iOS runtime
- Java基础学习总结(118)——单元测试的必要性和重要性
- Robust PCA Low-rank(附matalb 代码)
- 1003. 我要通过!(20)
- RabbitMQ(一)——HelloWord
- 关于如何避免操作(update、delete)mysql数据库时忘记添加where而导致全表修改或删除情况