Ajax之在SSM中的json用法

来源：互联网发布：下一代通信网络包括编辑：程序博客网时间：2024/05/17 08:01

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

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

1 0