springMVC使用ajax返回json对象,用jquery进行解析.

最新推荐文章于 2024-08-08 12:47:05 发布

vicent-

最新推荐文章于 2024-08-08 12:47:05 发布

阅读量6.9k

点赞数

分类专栏： ajax 文章标签： spring spring mvc jquery ajax json

本文链接：https://blog.csdn.net/vcen_/article/details/53581872

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在SpringMVC中使用Ajax返回JSON对象，并通过jQuery在前端页面进行解析。文章详细讲解了配置过程，包括在`applicationContext.xml`和`web.xml`的设置，以及控制器的实现。最后展示了前端页面的展示部分，鼓励读者尝试实现二/三级联动效果。

摘要由CSDN通过智能技术生成

今天学了springMVC使用ajax返回json对象,并在前台页面用jquery进行遍历,大家看完了可以尝试做一个简单的二/三级联动哦,

首先先导好spring+springMVC,jar包,这个大家都清楚,就不一一细列了,除外还需要导入两个json用的jar :

jackson-core-asl-1.9.7.jar

jackson-mapper-asl-1.9.7.jar

还有jquery-3.1.1.min.js

好了,下面开始代码演示 :

1.applicationContext.xml配置 :

<?xml version="1.0" encoding="UTF-8"?>  
<beans xmlns="http://www.springframework.org/schema/beans"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"  
    xmlns:tx="http://www.springframework.org/schema/tx"   
    xmlns:aop="http://www.springframework.org/schema/aop"  
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
                        http://www.springframework.org/schema/beans/spring-beans.xsd  
                        http://www.springframework.org/schema/context 
                        http://www.springframework.org/schema/context/spring-context-3.0.xsd  
                        http://www.springframework.org/schema/tx  
                        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd  
                        http://www.springframework.org/schema/aop 
                        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
                        http://www.springframework.org/schema/mvc 
                		http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> 
   
    <!-- 开启注解 -->
	<context:annotation-config/>   
    <!-- 扫描包设置 -->
	<context:component-scan base-package="com.zrrd.*"/> 
	<!-- 启用3.0新注解 -->
    <mvc:annotation-driven />  
	<!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>

</beans>

2.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <welcome-file-list>
   		<welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
  
	<context-param>  
	    <param-name>contextConfigLocation</param-name>  
	    <param-value>classpath:applicationContext.xml</param-value>  
	</context-param>  
		
	<!-- 服务器启动时，通过监听器初始化Spring的配置环境   
	    监听器，默认加载文件是：/WEB-INF/applicationContext.xml  
	-->  
	<listener>  
	    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
	</listener>  
  
	<!-- 配置字符集过滤器 -->
	<filter>
		<filter-name>encodingFilter</filter-name>
	    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
	    <init-param>
	          <param-name>encoding</param-name>
	          <param-value>UTF-8</param-value>
	    </init-param>
	    <init-param>
	         <param-name>forceEncoding</param-name>
	         <param-value>true</param-value>
	     </init-param>
	</filter>
	
	<filter-mapping>
	     <filter-name>encodingFilter</filter-name>
	     <url-pattern>/*</url-pattern>
	</filter-mapping>
  
  
	<!--    springMVC 核心控制器   -->
	<servlet>
		<servlet-name>dispatcherServlet</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		
	<!-- 初始化参数  springmvc 配置文件 -->
	<init-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
	</servlet>
	
	
	<servlet-mapping>
		<servlet-name>dispatcherServlet</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>
</web-app>

3.实体类entity:

package com.zrrd.json.controller;

/**
 * @user : vcen

 * @ClassName: Student

 * @TODO : 学生实体类

 * @date 2016-12-12 下午12:41:13
 */
public class Student {
	private int stuId;
	private String stuName;
	private String stuSex;
	
	public int getStuId() {
		return stuId;
	}
	public void setStuId(int stuId) {
		this.stuId = stuId;
	}
	public String getStuName() {
		return stuName;
	}
	public void setStuName(String stuName) {
		this.stuName = stuName;
	}
	public String getStuSex() {
		return stuSex;
	}
	public void setStuSex(String stuSex) {
		this.stuSex = stuSex;
	}
}

4.controller :

package com.zrrd.json.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**

 * @user : vcen

 * @ClassName: JosnController

 * @TODO : controller控制层

 * @date 2016-12-12 下午12:37:43

 */
@Controller
@RequestMapping("josnController")
public class JosnController {
	
	@ResponseBody
	@RequestMapping("ajaxTest.do")
	public List<Student> test(){
		List<Student> list = new ArrayList<Student>();
		
		//注入值
		Student stu = new Student();
		stu.setStuId(1);
		stu.setStuName("张三");
		stu.setStuSex("男");
		list.add(stu);

		Student stu2 = new Student();
		stu2.setStuId(2);
		stu2.setStuName("李四");
		stu2.setStuSex("女");
		list.add(stu2);
		
		return list;  //直接返回list对象
	}
}

前台显示页面 :

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
    
    <title>My JSP 'index.jsp' starting 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">
	
	<!-- 引入jquery文件 -->
	<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.min.js"></script>
  </head>
  
  <body>
        <button οnclick="$.clickJson()">点我</button>
        <div id="div1"></div>
        
        <script type="text/javascript">
        	$.extend({clickJson:function(){
        		  $.ajax({
					   type: "POST",
					   url: "<%=path%>/josnController/ajaxTest.do",
					   success: function(msg){
					   	   //msg : 返回的json对象     // i :元素下标   , n : 遍历出来的学生对象
					       $.each(msg,function(i,n){
					       		$("#div1").append("<p>"+n.stuId+","+n.stuName+","+n.stuSex+"</p>");
					       });
					   }
				});
        	}});
        </script>
  </body>
</html>

好了,演示到这里吧!!!