`
seyaa
  • 浏览: 54566 次
  • 性别: 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
分享到:
评论

相关推荐

    基于在线WebApi资源调用的Web前端应用《天气易搜》

    简化实现的过程,并保留核心的功能,例如,V-model双向绑定的运用、V-for列表渲染的运用、Bootstrap栅格系统实现页面自适应、Swiper轮播图与Vue框架的结合使用、后台json数据的提取和Echarts图表的创建等内容实现。...

    电影购票系统(包含接口文件、微信小程序、web前端、web管理端、SQL文件)

    使用open()方法,包含请求(post、get)、url地址和是否异步执行操作,使用send()方法发送,最后使用在onreadystatechange回调函数访问成功后获取数据,通过JSON.parse()方式解析数据,最后在前端页面渲染后上显示。...

    json-prettier-app:网络上最好的JSON格式化程序

    杰森·普雷捷 ‍:laptop: 开源JSON格式器Web应用程序。 关于该项目的目标是创建开发人员想要的JSON格式。 关键概念是: :female_sign: 美丽,使用开发人员喜欢使用的样式。 :broom: 清洁,设计简单客观。 :unlocked:...

    Struts+Jquery+Ajax+Json应用实例

    Struts+Jquery+Ajax+Json应用实例,前端引入jquery,后台使用struts框架。前端js调用后台action,并将后台返回的json数据进行解析,设置web页面

    基于JSON的Ajax实践

    在AJAX里边,当用户查看和与页面交互的时候,页面的JavaScript代码向web服务器请求数据(AJAX里的“异步”)。这些请求是HTTP请求,就像一个浏览器在第一个地方取得页面,其中可以包括任意图片,样式表等等。同样的...

    task.json-web:具有基于task.json格式的用React.js编写的Web UI的任务管理应用

    屏幕截图特征物料设计界面所有数据的本地存储(无后端服务器) 与task.json-server任务同步黑暗与光明的主题支援Android在线演示 注意:该演示是一个静态页面,数据将存储在浏览器的本地存储中。发行版GitHub发行版...

    轻量级响应式框架Vue.js应用分析

    传统DOM处理需要编写繁杂的选择器,逐级操作还原服务器需要的JSON数据格式,不但操作繁琐且易出现致命错误。而通过Vue.js的响应式双向绑定数据,实时反映数据的真实变化并映射到数据源上,避免前端页面开发中DOM选择器...

    json-react-layouts:JSON React布局使组件和布局(称为合成)的注册可以打开由数据驱动布局的页面的可能性

    React非常适合构建Web应用程序,但是有时直接在网站上使用React可能会导致一堆需要在每个页面路由上使用的高阶组件,钩子或辅助函数。 JSON React布局使解决所有交叉关注问题变得更加容易,这些关注问题以一种很好...

    MVC WebApi 用户权限验证及授权DEMO

    Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个功能复杂的业务应用系统,通过角色授权来控制用户访问,本文通过Form认证,Mvc的Controller基类及Action的权限验证来实现Web系统登录,Mvc前端权限...

    Web-server:创建一个为HTML和CSS提供服务的HTTP服务器,并将信息从前端发送到后端,并通过将所有数据保存在'data.json'文件中进行持久化

    创建一个Web服务器通过将所有数据保存在“ data.json”文件中,创建一个为HTML和CSS提供服务的HTTP服务器,并将信息从前端发送到后端并进行持久化。 :high_voltage: HTML,CSS,Node JS :high_voltage: :thumbs_up: ...

    Temperature_IOT:一个物联网应用,用来作温度监控的web应用

    在请求了这个前端页面后,在前端页面的JS代码中发送一个请求温度值的请求到服务器中,服务器返回相应时间段内的温度值列表的JSON格式,然后前端页面负责处理这个返回的JSON数据来最终显示温度数值。这个JSON格式的...

    详解JSON和JSONP劫持以及解决方法

    一些web应用会把一些敏感数据以json的形式返回到前端,如果仅仅通过cookie来判断请求是否合法,那么就可以利用类似csrf的手段,向目标服务器发送请求,以获得敏感数据。 比如下面的链接在已登录的情况下会返回json...

    XiaoMiStore.zip

    由于没有实现数据库和后台模块等功能, 项目的测试数据我采用的是JSON格式的数据文件,通过AJax请求完成整个前台功能的数据交互, 后期再考虑实现一个后台管理系统及数据库系统,还有前端页面资源的异步加载及优化。

    CCMS是一套完善、通用的可配置化的方案 通过配置化自动生成中后台(CMS)界面,实现零开发搭建内容管理系统

    CCMS是一套完善、通用的可配置化的方案。通过配置化自动生成中后台(CMS)界面。...通过JSON数据格式描述各API请求的接口信息、入参、出参及各种常见校验和简单逻辑,动态渲染前端页面。实现零开发搭建内容管理系统。

    基于EasyUIdatagrid实现数据库操作的方法 (2012年)

    MVC三层架构是一种经典的设计模式,MVC的思想是将“显示”(View)、...其中Datagrid是数据库WEB页面呈现较频繁的一种样式,设计中,数据在呈现于WEB页面前,已事先被封装为JSON格式的数据,数据和显示及控制是分开进行的。

    SGDFrontend:SGD的前端代码

    它从SGDBackend检索JSON格式的数据,然后创建网站的页面。 构建应用 前提条件,node.js&gt; 4.2.0和python 2.7.x. o管理python依赖关系,为此项目配置一个virtualenv。 请参阅。 节点程序包问题和版本 您可能会遇到...

    code_challenge_lds_church:前端React Web应用程序的代码挑战

    我通过使用JSON对象和用于模拟数据请求和承诺的伪造api开发后端来开始该项目。 然后,我构建了一个导航标题和仪表板页面,用于浏览应用程序的不同区域。 我大部分时间都集中在“文章”和“图块”页面设计上,以使...

    vn-open-api-provinces:开放API以列出越南行政区划

    通过在其上构建在线工具,我希望帮助越南标准数据覆盖更多应用程序开发人员,尤其是 Web 前端应用程序,其中包含大 JSON 文件不是一个优化选项。 最终,它可以帮助企业更好地协作(通过使用相同的标准数据)并使...

    Dojo 1.5源码包

    1) Dojo是是一个纯Javascript库,后台只要提供相应的接口能够将数据以Json的格式输出给前台即可. 2) Dojo自身定义了完整的函数库,屏蔽了浏览器的差异. 3) Dojo自身定义界面组件库,其组件代码采用了面向对象的思想...

    高校心理系统开题报告参考文档

    通过Thymeleaf模板引擎实现Java代码和前端代码分离,前端服务器访问后端服务器提供的接口,返回Json数据给前端进行渲染。实行前后端分离以达到前后端能够各司其职,前端注重服务的使用,后端注重服务的提供。代码...

Global site tag (gtag.js) - Google Analytics