`
longying2008
  • 浏览: 302017 次
社区版块
存档分类
最新评论

采用jQuery技术获得从服务器返回经MappingJacksonJsonView转化的JSON格式数据

阅读更多

操作流程:


工程结构:



 

在web.xml文件中配置Spring MVC

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">

  <display-name>SpringTest</display-name>
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
  <context-param>
  	<param-name>contextConfigLocation</param-name>
  	<param-value>classpath:/applicationContext.xml</param-value>
  </context-param>
  
  <servlet>
	<servlet-name>springTest</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
	<load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  	<servlet-name>springTest</servlet-name>
  	<!-- 支持REST风格的URL,springTest捕获所有的请求 -->
  	<url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

 

springTest-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans   
           http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
           http://www.springframework.org/schema/mvc  
           http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
           http://www.springframework.org/schema/context   
           http://www.springframework.org/schema/context/spring-context-3.0.xsd">
           
	<!-- 自动扫描com.wgc.web 包下的@Controller标注的类控制器类 -->
	<context:component-scan base-package="com.wgc.web" />
	
	<!-- 启动Spring MVC的注解功能,完成请求和注解POJO的映射 -->
	<mvc:annotation-driven/>
	
	<!-- 处理静态资源 -->
	<mvc:resources mapping="/static/**" location="/WEB-INF/static/" />
	
	<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver" 
		p:order="0" 
		p:defaultContentType="text/html" 
		p:ignoreAcceptHeader="true" 
		p:favorPathExtension="false" 
		p:favorParameter="true" 
		p:parameterName="content">
		<property name="mediaTypes">
			<map>
				<entry key="html" value="text/html" />
				<entry key="xml" value="application/xml" />
				<entry key="json" value="application/json" />
			</map>
		</property>
		<property name="defaultViews">
			<list>
				<bean class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" 
					p:renderedAttributes="users" />
			</list>
		</property>
	</bean>
	<!-- 对模型视图名称的解析,在请求时模型视图名称添加前后缀 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
		p:order="10" 
		p:prefix="/WEB-INF/jsp/" p:suffix=".jsp">
		<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />  
	</bean>
</beans>  

 

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:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
    ">
    <!-- 数据访问层配置 -->
    <import resource="classpath:/springTest-dao.xml" />
     <!--服务层配置 -->
    <import resource="classpath:/springTest-service.xml" />
</beans>
  

 
 springTest-dao.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:tx="http://www.springframework.org/schema/tx"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="
    http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.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">
	
	<!-- 扫描com.wgc.dao包下所有标注@Repository的DAO组件 -->
    <context:component-scan base-package="com.wgc.dao"/>
    
    <!-- 配置数据源 -->
    <context:property-placeholder location="classpath:jdbc.properties"/>
	<bean id="dataSource"
		class="org.apache.commons.dbcp.BasicDataSource"
		destroy-method="close"
	    p:driverClassName="${jdbc.driverClassName}"
	    p:url="${jdbc.url}"
	    p:username="${jdbc.username}"
	    p:password="${jdbc.password}" />
	    
	<!-- 使用Spring JDBC:声明JdbcTemplateBean -->
	<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
		<property name="dataSource" ref="dataSource"/>
	</bean>
	
	<bean id="sessionFactory"
		class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean">
		<property name="dataSource" ref="dataSource" />
	    <property name="packagesToScan">
            <list>
                <value>com.wgc.domain</value>
            </list>
        </property>
		<property name="hibernateProperties">
			<props>
				<prop key="hibernate.dialect">
					org.hibernate.dialect.MySQLDialect
				</prop>
				<prop key="hibernate.show_sql">true</prop>
				<prop key="hibernate.cache.provider_class">
					org.hibernate.cache.EhCacheProvider
				</prop>
				<prop key="hibernate.cache.use_query_cache">true</prop>
				<prop key="hibernate.hbm2ddl.auto">update</prop>
			</props>
		</property>
	</bean>
	<bean id="hibernateTemplate"
		class="org.springframework.orm.hibernate3.HibernateTemplate"
		 p:sessionFactory-ref="sessionFactory" />
</beans>

 

springTest-service.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:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
    xmlns:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-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/context http://www.springframework.org/schema/context/spring-context-3.0.xsd 
    http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
    <context:component-scan base-package="com.wgc.service"/>
	<bean id="transactionManager"
		  class="org.springframework.orm.hibernate3.HibernateTransactionManager"
		  p:sessionFactory-ref="sessionFactory" />
</beans>

 

User.java

package com.wgc.domain;

public class User {
    private String userid;
    private String username;
    private String pass;
    
    public User() {}
    public User(String username, String pass) {
    	this.username = username;
    	this.pass = pass;
    }
    
    public String getUserid() {
        return userid;
    }
    
    public String getUsername() {
        return username;
    }
    
    public String getPass() {
        return pass;
    }
    
    public void setUserid(String userid) {
        this.userid = userid;
    }
    
    public void setUsername(String username) {
        this.username = username;
    }
    
    public void setPass(String pass) {
        this.pass = pass;
    }
}

 

Controller_01.java

package com.wgc.web;

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

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.wgc.domain.User;

@Controller
@RequestMapping("/test")
public class Controller_01 {
	
	@RequestMapping("/JSON")
	public String testJSON() {
		System.out.println("testJSON");
		return "testJSON";
	}
	
	@RequestMapping("/getJSON")
	public ModelAndView getJSON() {
		System.out.println("getJSON");
		ModelAndView mav = new ModelAndView();
		List<User> users = this.getUsers();
		mav.addObject("users", users);
		mav.setViewName("testJSON");
		return mav;
	}
	
	private List<User> getUsers() {
		List<User> users = new ArrayList<User>();
		users.add(new User("user_01", "123"));
		users.add(new User("user_02", "456"));
		return users;
	}
}

 

testJSON.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../static/js/jquery-1.10.1.js"></script>
   
<script type="text/javascript">
$(function(){
	$("#testJson").click(function(){
	 	$.ajax({
	 		type:"GET", 
	 		url:"http://localhost:8080/SpringTest/test/getJSON?content=json", 
	 		dataType:"json", 
	 		contentType:'application/json;charset=UTF-8',
	 		success:function(data){
	 			$("#result").empty();
	 			var strResult = "";
	 			var users = data.users;
	 			for(index in users){
					strResult += "<div class='comment'>用户名:" + users[index].username + "<br />密码:" + users[index].pass + "<hr /></div>";
		 		}
	 			$("#result").html(strResult);
	 		}, 
			error:function(){
				alert("error.");
			}
	 	});
	});
})
</script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>TestJSON</title>
</head>
<body>
	<!-- 
	<c:forEach var="user" items="${users}">
		<div>
			用户名:${user.username}<br/>
			密码:${user.pass}<hr/>
		</div>
	</c:forEach>
	 -->
	 <input type="button" id="testJson" value="测试返回JSON类型数据">
	 <div id="result">获得的数据将会在这里显示</div>
</body>
</html>

 

  • 大小: 5.9 KB
  • 大小: 15.3 KB
分享到:
评论

相关推荐

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...

    使用JQuery实现从JSON对象转换为form提交数据

    在前端开发中,有时我们需要将JSON格式的数据转换成表单(form)的格式进行提交,以便于服务器端处理。在JavaScript的世界里,jQuery库提供了一种便捷的方式来进行这样的转换。本篇文章将深入探讨如何利用jQuery从...

    对象转换为JSON数据格式&使用JQuery获取数据

    结合这两个知识点,如果你需要从服务器获取JSON数据并在前端展示,可以先使用`$.getJSON()`获取数据,然后将返回的JSON对象转换成JavaScript对象,再利用这些数据更新HTML元素。例如: ```javascript $.getJSON('...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    从服务器接收到的返回数据可以是 JavaScript 对象,或者是以 JSON 格式定义的数组。如果数据是 JSON 格式,可以通过 `$.parseJSON()` 方法将其解析为 JavaScript 对象。在成功回调函数中处理返回的数据,可以按照...

    asp.net json格式数据

    例如,`$.getJSON`函数可以方便地从服务器请求JSON数据,而`$.ajax`方法可以自定义更复杂的请求,包括JSON数据的发送和接收。 5. **WebMethod和JSON**: - ASP.NET页面上的`WebMethod`特性允许在代码-behind文件中...

    用jquery解析JSON数据的方法

    用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里...

    html对应的文件中 将form 表单数据 转化为json 格式

    本篇将详细介绍如何在HTML表单中收集数据,并利用jQuery的`ajax`方法将这些数据转化为JSON格式,以便于插入Oracle数据库。 首先,让我们了解一下HTML表单的基本结构。一个简单的HTML表单可能包含以下元素: ```...

    使用jquery的方式通过ajax处理json格式的数据

    在上述代码中,`dataType: 'json'` 指定了服务器返回的数据类型为JSON,jQuery会自动将返回的数据转化为JavaScript对象。`success` 函数是请求成功后的回调,它接收三个参数:`data`(服务器返回的数据)、`status`...

    Jquery.json.js

    jQuery提供了方便的方法来处理JSON数据,包括`$.getJSON()`和`$.ajax()`等函数,可以方便地从服务器获取JSON数据并将其转化为JavaScript对象,或者将JavaScript对象转换为JSON字符串发送到服务器。 **jQuery的get...

    jQuery JSONView-格式化和语法高亮JSON格式数据查看插

    jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。通过该插件可以将JSON格式的数据进行格式输出,便于阅读,同时它还支持各种数据类型的语法高亮,以及节点的收缩和展开等。

    json数据jquery异步示例

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,通常用于在客户端(如浏览器)与服务器之间进行数据传输,特别是在AJAX...

    jQuery实现将mysql数据库中的数据转化为json数据在前台显示

    在本项目中,jQuery的$.getJSON()方法用于从服务器获取JSON格式的数据,这是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 $.getJSON()函数的基本语法是`$.getJSON(url, data, callback...

    json格式数据查看和编辑jQuery插件

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于前后端交互,它以文本形式存储和传输数据,易于人阅读和编写,同时也易于机器解析和生成。jQuery是一个快速、简洁的JavaScript库,它简化...

    jquery获取json数据的并分页案例

    在Web开发中,服务器通常会通过Ajax请求返回JSON数据,供前端JavaScript处理和展示。 要使用jQuery获取JSON数据,我们通常会使用`$.ajax()`或`$.getJSON()`方法。`$.ajax()`是一个更全面的异步HTTP(Ajax)请求方法...

    JS解析后台返回的JSON格式数据实例

    ”)将后台传回的数据转化为JSON格式,否则不需要转换。 遍历json中的array方法: $.each jquery.each for (var i in array) { array[i]. } 以上这篇JS解析后台返回的JSON格式数据实例就是小编分享给大家的全部内容...

    JQuery 获取json数据$.getJSON方法的实例代码

    $.getJSON是JQuery中处理JSON数据常用的一个方法,它用于从服务器获取JSON格式数据,并且可以指定当成功接收到数据时执行的回调函数来处理这些数据。 首先,了解JQuery库是学习$.getJSON方法的前提。JQuery是一个...

    网页模板——jQuery查看json格式数据插件viewer.js.zip

    网页模板中的jQuery查看JSON格式数据插件`viewer.js`是一个非常实用的工具,它使得开发者和用户能够在浏览器中直观地查看和理解JSON数据结构。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛...

    SSH框架ajax获取的json格式数据处理过程

    SSH 框架 Ajax 获取的 JSON 格式数据处理过程 在本文中,我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程,并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维...

    jQuery显示后端服务器json数据返回代码

    部分代码参考自网络,如有侵权,请联系删除

Global site tag (gtag.js) - Google Analytics