您的位置：首页 > Web前端 > JavaScript

Ajax之在SSM中的json用法

2016-06-11 15:18 393 查看

问题？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" onsubmit="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;
}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航