Ajax之在SSM中的json用法

最新推荐文章于 2022-05-21 16:14:26 发布

不爱吃鱼丶

最新推荐文章于 2022-05-21 16:14:26 发布

阅读量559

点赞数

分类专栏： ajax

ajax 专栏收录该内容

6 篇文章 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文件的配置，把以下加入即可

[html]view plaincopy 
   
print?
 <!-- 配置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代码：

[html]view plaincopy 
   
print?
 <%@ 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走服务方法

[java]view plaincopy 
   
print?
 /** 
  *  
  * 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;  
 }  

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

不爱吃鱼丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax之在SSM中的json用法

问题？Ajax之在SSM中的json用法1.问题这个问题是在总项目的时候遇到的问题，在SSM框架中使用json数据，和在S2SH中使用json大不相同，不能作为同一种来用，在S2SH中如何使用jar包来转化为json对象的用法(博客文章:点击打开链接)，而这篇文章是针对SSM中springmvc的数据类型转化机制来说的。因为S2SH中没有自动转化的功能，而SSM中有
复制链接

扫一扫

专栏目录