Ajax之在SSM中的json用法

最新推荐文章于 2024-07-16 20:04:56 发布

黯雅悸动

最新推荐文章于 2024-07-16 20:04:56 发布

阅读量2.6w

点赞数 7

分类专栏： --------《Ajax》文章标签： json s2sh中对json数据的配置 s2sh中使用Ajax传输json jackson下载

本文链接：https://blog.csdn.net/Mr_li13/article/details/51636574

版权

--------《Ajax》专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题？Ajax之在SSM中的json用法

1.问题

这个问题是在总项目的时候遇到的问题，在SSM框架中使用json数据，和在S2SH中使用json大不相同，不能作为同一种来用，在S2SH中如何使用jar包来转化为json对象的用法(博客文章:点击打开链接)，而这篇文章是针对SSM中springmvc的数据类型转化机制来说的。因为S2SH中没有自动转化的功能，而SSM中有自动转化成Json对象的功能，但是后者需要用到一个叫jackson的jar包,再配置一下文件，即可使用。

jar包下载:点击打开链接

2.配置

(1)拷入jar包

(2)springmvc-servlet.xml文件的配置，把以下加入即可

<!-- 配置json数据 -->
	<bean  
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
        <property name="messageConverters">  
            <list>  
                <ref bean="mappingJackson2HttpMessageConverter" />  
            </list>  
        </property>  
    </bean>  
    <bean id="mappingJackson2HttpMessageConverter"  
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">  
        <property name="supportedMediaTypes">  
            <list>  
                <value>text/html;charset=UTF-8</value>  
                <value>text/json;charset=UTF-8</value>  
                <value>application/json;charset=UTF-8</value>  
            </list>  
        </property>  
    </bean>

3.案例

(1)前端Ajax代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
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%>">
    <link href="<%=basePath%>/sources/pictures/Teacher.ico" rel="shortcut icon" type="image/x-icon"/>
    
    <title>Update 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" media="screen" type="text/css" href="${pageContext.request.contextPath }/sources/css/styles.css">
	<script src="${pageContext.request.contextPath }/sources/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<style>
    .contact_form{padding-top:40px;}
	.title {background-color:rgba(0,0,0,0.56); text-align:center; width:100%; position:fixed; top:0; left:0; padding:5px 0;}
	.title a {color:#FFF; text-decoration:none; font-size:16px; font-weight:bolder; line-height:24px;}
</style>
<script type="text/javascript">
	var flag = false;
	$(function(){
		
		/*院级Ajax*/
			$("#i_id").change(function(){
				var i_id = $("#i_id").val();
				if(i_id==""){
					alert("您还未选中值，请选择！")
				}else{
					$.ajax({
					type:"POST",
					url:"conllection/findGrade.action",
					dataType:"json",
					data:{i_id:i_id},
					success:function(data){
						if(data=="{}"){
							alert("该院没有查询到数据!");
						}else{
							$("#t_id").html("");
							$.each(data,function(i, item) {
								var statem = "<option value='"+item.grade+"'>"+item.grade+"</option>";
								$("#t_id").append(statem);
							});
							
						}
					},
					error:function(){
							alert("方法执行不成功!");
						}  
					 });
				  }
				});

			/*班级Ajax*/
			$("#t_id").on('click',function(){
				/* alert($("#t_id").val()); */
				var i_id = $("#i_id").val();
				if(t_id==""){
					alert("您还未选中值，请选择！");
				}else{
					$.ajax({
					type:"POST",
					url:"conllection/t_id.action",
					dataType:"json",
					data:{i_id:i_id},
					success:function(data){
						/* alert(data); */
						if(data=="{}"){
							alert("该院没有查询到数据!");
						}else{
							$("#c_id").html("");
							$.each(data,function(i, item) {
								var statem = "<option value='"+item.c_id+"'>"+item.cname+"</option>";
								$("#c_id").append(statem);
							});
							
						}
					},
					error:function(){
							alert("方法执行不成功!");
						}  
					 });
				}
			});

			/*教师课程链接检测*/
			$("#c_id").change(function(){
				/* alert($("#c_id").val()); */
				if($("#t_id").val()==""||$("#c_id").val()==""){
					alert("您还未选中值，请选择！");
				}else{
					$.ajax({
					type:"POST",
					url:"conllection/ErrorCollection1.action",
					dataType:"json",
					async: false,
					data:{t_id:$("#t_id").val(),c_id:$("#c_id").val()},
					success:function(data){
					/* 	alert(data); */
						if(data==1){
							alert("该班级和课程已经存在数据!");
							flag=false;
						}else{
							alert("该班级和课程可以建立关系!");
							flag=true;
						}
					},
					error:function(){
							alert("方法执行不成功!");
						}  
					 });
				}
			});
			
			
		});
		//提交之前检查是否存在关系
		function check(){
			if(flag){
				return true;
			}else{
				alert("您选择的课程或者老师已经存在关系，请重新填写!");
				return false;
			}
		}
</script>
  </head>
  
  <body>
    <div align="center">
		<table border="1" width="47%" height="250" style="border-width: 0px">
			<tr>
				<td style="border-style: none; border-width: medium">　
				<form class="contact_form" action="${pageContext.request.contextPath }/collection/StudentAndCourse.action" method="post" name="contact_form" οnsubmit="return check()">
		    <ul>
		        <li>
		             <h2>更新信息</h2>
		             <span class="required_notification">* 表示必填项</span>
		        </li>
		        <li>
		            <label for="name">院级:</label>
		            <select name="i_id" id="i_id">
		            	<option value="">--选择--</option>
			            <c:forEach items="${courtyard}" var="v">
							   <option value="${v.i_id }">${v.iname }</option>
						</c:forEach>     				
					</select>
		        </li>
		        <li>
		            <label for="name">班级:</label>
		            <select name="t_id" id="t_id">
		            	<option value="">--选择--</option>     				
					</select>
		        </li>
		        <!-- <li>
		            <label for="message">结果:</label>
		            <textarea name="census" id="result" cols="40" rows="6" placeholder="查询结果"></textarea>
		        </li> -->
		        <!-- <li>
		        	<label for="message">结果:</label>
		        	<div id="result1"></div>
		        </li> -->
		        <li>
		            <label for="name">课程:</label>
		            <select name="c_id" id="c_id">
		            	<option value="">--选择--</option>     				
					</select>
		        </li>
		         <li>
		        	<button class="submit" type="submit">Submit</button>
		        </li>
		    </ul>
		    </form></td>
			</tr>
		</table>
	</div>
<div style="text-align:center;clear:both">
</div>
  </body>
</html>

(2)后端Ajax走服务方法

	/**
	 * 
	 * Ajax请求得到班级信息
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value="/conllection/findGrade.action", method=RequestMethod.POST,produces="application/json;charset=UTF-8")
	public List<Grade> findGrade(Integer i_id){
		System.out.println(i_id);
		/*List<Grade> grades = this.studentService.findStudentGrade();*/
		List<Grade> grades = this.studentService.findGradeI_id(i_id);
		for(Grade grade:grades){
			System.out.println(grade.toString());
		}
		return grades;//在这里配置文件和jackson工具就自动转化了，直接返回对象即可
	}
	
	
	/**
	 * 
	 * Ajax请求得到是否存在关系
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value="/conllection/ErrorCollection1.action", method=RequestMethod.POST,produces="text/plain;charset=UTF-8")
	public boolean findErrorCollection(String t_id,Integer c_id){
		System.out.println("检测数据:"+t_id+"--"+c_id);
		Map map = new HashMap();
		map.put("grade", t_id);
		map.put("c_id", c_id);
		int result = this.studentService.findStudentGradeResult(map);
		System.out.println("结果数:"+result);
		if(result==1){
			return true;
		}
		return false;
	}

这个例子就有点儿可以做三级联动了。

有兴趣的童鞋，可以加群交流交流: