`
seyaa
  • 浏览: 55794 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Json格式数据在Web前端页面的应用

    博客分类:
  • JSON
阅读更多
   之前已经说了怎么把对象中的数据格式化成json数据和将json格式的字符串转换成对象。现在说说怎么将json数据发送到客户端,并且在客户端进行使用。
 
  第一步,把json数据发送到客户端:
 
package test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

public class Tes3 extends DispatchAction {
	

	protected final Logger logger = Logger.getLogger(getClass());

	public void redtest(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		Student stu1 = new Student(1, "goodboy", 20, "boy", "我的老家在东北,家住松花江上啊",	"123456789123456789");
		Student stu2 = new Student(2, "goodboy", 20, "boy", "我的老家在东北,家住松花江上啊",	"123456789123456789");
		List<Student> stus = new ArrayList<Student>();

		stus.add(stu1);
		stus.add(stu2);
		ClassS classs = new ClassS(1, "class1", stus);
		stu1.setClasss(classs);
		stu2.setClasss(classs);
		System.out.println();
		String text = JSONObject.fromObject(classs,	FiltrateUtil.filtrate(new String[] { "classs" })).toString();
		try {
			response.setContentType("text/x-json;charset=UTF-8");
			response.getWriter().write(text);
			response.flushBuffer();
		} catch (IOException e) {
			logger.error(e);
		}
	}

}



过滤器:
 
package test;


import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;
/**
 *
 * 功能描述:过滤掉格式化数据为json格式的时候的自身关联
 * 
 */
public class FiltrateUtil {

	public static JsonConfig filtrate(final String[] str) {
		JsonConfig config = new JsonConfig();
		config.setJsonPropertyFilter(new PropertyFilter() {
			public boolean apply(Object source, String name, Object value) {
				if(str!=null&&str.length>0){
					boolean flag = false;
					for(int i = 0;i<str.length;i++){
						if (name.equals(str[i])) {
							flag = true;
							break;
						}
					}
					return flag;
				}else{
					return false;
				}
			}
		});
		return config;
	}
}

    数据传输到了客户端,就可以轻易而举的将数据取出来了。
    首先你要在你的页面引入jquery.min.js
   
<script type="text/javascript" src="jquery.min.js"></script>

    然后代码如下:
   
$(document).ready(function(){
	$.ajax({
		   type: "POST",
		   url: "${ctx}/stockCheckAction.do?method=redtest",
		   success: function(msg){
			   alert("classId:"+msg.id+",className:"+msg.name);
			   alert("student1---:id"+msg.students[0].id+",name:"+msg.students[0].name+",address:"+msg.students[0].address);
			   alert("student2---:id"+msg.students[1].id+",name:"+msg.students[1].name+",address:"+msg.students[1].address);
		   }
		});
});


    我这里只是简单的取出来看下,如果你使用可以处理json数据的js组件,将数据传给你的组件你的组件就有了数据。如果你不能弹出数据 就将msg 进行下处理 eval(msg)。
    取出来的数据你可以给页面的一些文本框赋值或者供你的js代码使用。
1
2
分享到:
评论

相关推荐

    前端展示json数据,格式化,可折叠展开

    本主题将详细介绍如何在前端实现JSON数据的格式化展示,以及支持折叠和展开的功能。 首先,理解JSON的基本结构是至关重要的。JSON由键值对组成,键必须是字符串,用双引号包围,而值可以是各种类型,如字符串、数字...

    Java 实现Redis存储复杂json格式数据并返回给前端

    在Java Web开发中,利用Redis作为缓存...通过上述方式,Java开发者可以有效地将复杂JSON数据存储在Redis中,提高数据处理效率,并及时响应前端请求。在实际项目中,还需要根据业务需求和系统性能进行适当的优化和调整。

    使用json数据生成表单页面

    在Web开发中,动态生成表单页面是一种常见的需求,特别是在数据驱动的应用中。"使用json数据生成表单页面"这个主题就是围绕这一需求展开的。它涉及到的主要技术是JavaScript,特别是利用JSON(JavaScript Object ...

    asp数据集输出json格式数据,也可以多重嵌套的JSON

    在本文中,我们将深入探讨如何在ASP中将数据集转换为JSON格式,并处理多重嵌套的JSON数据。JSON(JavaScript Object Notation)是轻量级的数据交换格式,广泛应用于Web服务与客户端之间的数据交互。 首先,让我们...

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

    通过以上方法,可以实现将后端返回的JSON格式数据渲染到前端页面上,这对于构建动态交互网站非常有用。在实际开发中,开发者需要根据项目需求选择合适的前后端技术栈,并按照最佳实践编写代码,以确保应用的高效、...

    web前端跨域取JSON

    7. **AJAX**技术:在前端获取JSON数据通常使用AJAX(Asynchronous JavaScript and XML),现在更多指的是使用XMLHttpRequest或Fetch API进行异步请求,获取JSON数据并进行处理。 在HTML5和CSS3的环境中,开发者可以...

    flask bootstrap页面json格式化

    本篇文章将深入探讨如何在Flask应用中结合Bootstrap来展示和格式化JSON数据。 首先,确保已安装了Flask、Bootstrap和相关的依赖。可以使用以下命令安装: ```bash pip install flask flask-bootstrap ``` 接下来...

    ajax和beego前后端json格式数据交互实例

    Beego通过提供强大的Go结构体到JSON的转换能力,简化了后端的开发工作,而Ajax则让前端能够轻松地发送和接收JSON数据,实现页面的无刷新更新。在实际项目中,这样的组合能够提高用户体验,同时降低服务器负载。

    json数据展现页面

    综上所述,"json数据展现页面"项目涉及的主要知识点包括JSON数据格式、数据获取与解析、JavaScript数据处理、DOM操作、以及前端框架的使用。通过熟练掌握这些技能,我们可以有效地将JSON数据转换为用户友好的网页...

    动态调取webservice返回json数据并处理

    在本例中,可能需要在后台代码(如C#)中处理JSON数据,然后在页面加载事件中将数据绑定到GridView。此外,可能还需要考虑错误处理、数据分页、排序和筛选等功能,以提供更丰富的用户体验。 总结,动态调取...

    web前端课程设计.zip

    此外,理解RESTful API和JSON数据格式对于前端开发者来说也很重要,因为它们常用于与后端服务器进行数据交换。开发者可能需要编写AJAX请求(如"fetch.js"或"axios.js")来获取、发送数据。 在实际项目中,版本控制...

    java+json数据格式例子

    在Java中,处理JSON数据是常见的任务,尤其是在前后端交互中,JSON作为数据传输的载体,使得无刷新页面更新成为可能。 在前端,JavaScript可以方便地创建和操作JSON对象。例如,假设我们有一个用户对象,包含用户名...

    Chrome JSON格式化扩展应用

    只需在浏览器中打开包含JSON数据的网页,或者右键点击页面上的JSON文本并选择“检查”(Inspect),在开发者工具的源代码或控制台视图中选中JSON数据,然后使用这款插件的快捷键或者通过扩展菜单来触发格式化功能。...

    AJAX 想Struts2后台传送Json数据并向前台返回Json格式的数据

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许页面在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。而Struts2是一个强大的MVC(Model-View-Controller)框架,它广泛应用...

    JSONEditor格式化

    JSONEditor广泛应用于API开发、Web服务测试、数据配置文件管理、JSON数据可视化等多个场景。对于前端开发者来说,它是调试API响应的理想工具;对于数据分析师,它能帮助整理和理解结构化数据。 总之,JSONEditor是...

    jQuery读取json数据

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

    平台java前端ajax,json请求

    本话题主要关注在Web平台中,使用Java后端和JavaScript前端进行JSON数据交互的过程,具体涉及到AJAX(Asynchronous JavaScript and XML)技术以及JSON(JavaScript Object Notation)数据格式。 **1. AJAX**:AJAX ...

    前端开源库-json-web-storage

    这两个Web存储机制允许前端应用在用户浏览器中保存数据,即使页面刷新或关闭,这些数据也能被持久化。 - `localStorage`用于长期存储数据,容量通常为5MB,适用于需要在用户多次访问网站时保持数据的情况。 - `...

    web前端+jquery与ajax+json+手写前端完全实现分页

    在分页应用中,服务器通常会返回JSON格式的分页数据,前端通过解析这些数据来填充页面。 **JavaScript分页** 是前端实现的关键部分,它包括计算总页数、处理用户点击分页按钮的事件、加载对应页的数据等步骤。手写...

    Chrome浏览器插件-对数据做json格式化

    在没有这样的格式化工具时,开发者可能需要手动复制JSON数据到专门的在线格式化器或使用代码来解析,这无疑增加了工作负担。有了JSONView这样的插件,工作效率可以显著提升。 JSONView-for-Chrome-master这个文件名...

Global site tag (gtag.js) - Google Analytics