数据库:mongoDB
框架:springMVC, Spring Data
Web前端:JQuery, JQuery EasyUI, jqPlot
jqPlot代码:
$(function() {
var tab = $('#index_tabs div[name=realtime_sgt].easyui-tabs').tabs(
'getSelected');
var id = tab.panel('options').title;
$('<div style="height:300px;width:500px" id='+id+'></div>').appendTo(
tab);
var wellNum = id.substring(0, id.length - 3);
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
async : false,
url : url,
type : 'post',
cache : true,
dataType : 'json',
data : 'wellNum=' + wellNum,
success : function(data) {
ret = data.data;
//ret = [[[1,1],[3,4],[2,1],[5,6],[2,0],[2,6]]];
}
});
return ret;
};
var jsonurl = 'getSGTPlotData.html';
var plot = $.jqplot(id, jsonurl, {
title : id,
dataRenderer : ajaxDataRenderer,
dataRendererOptions : {
unusedOptionalUrl : jsonurl
},
seriesDefaults: {
showLine: true,
rendererOptions: {
smooth: true
}
},
sortData:false,
axes : {
xaxis : {
label : "位移(米)",
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
},
yaxis : {
label : "载荷(千牛)",
labelRenderer : $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter : {
show : true
},
cursor : {
show : true,
zoom : true
}
});
});
后台代码:
@Controller
public class WellDataController {
@Autowired
private WellDataService wellDataService;
private static final Logger log = Logger.getLogger(WellDataService.class);
/**
* 获得实时示功图曲线数据
* @param wellNum
* @return
*/
@RequestMapping("/getSGTPlotData.html")
@ResponseBody
public Map<String, Object> getSGTPlotData(@RequestParam(value="wellNum", required=true)String wellNum) {
WellData wellData = wellDataService.getLatestWellDataByWellNum(wellNum);
JSONArray jsonArrayResult = new JSONArray(); //最终的数组
JSONArray jsonArray = new JSONArray();
LvBo.lvBo(wellData.getWeiyi(), wellData.getZaihe());
JSONArray weiyi = JSONArray.fromObject(wellData.getWeiyi());
JSONArray zaihe = JSONArray.fromObject(wellData.getZaihe());
log.debug(weiyi.size());
for(int i=0;i<weiyi.size();i++) {
JSONArray json = new JSONArray();
json.add(weiyi.get(i));
json.add(zaihe.get(i));
jsonArray.add(json);
}
jsonArrayResult.add(jsonArray);
Map<String, Object> map = new HashMap<String, Object>();
map.put("data", jsonArrayResult);
return map;
}
}
springMVC JSON转换器:
<bean class ="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" >
<property name="messageConverters">
<list>
<ref bean="mappingJacksonHttpMessageConverter" /><!-- json转换器 -->
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
jqplot图形预览:
- 大小: 96.1 KB
分享到:
相关推荐
SpringMVC是Spring框架的一部分,用于构建高效、灵活的后端控制器,而jQuery则是一个强大的JavaScript库,简化了前端的DOM操作、事件处理以及Ajax交互。本文将深入探讨SpringMVC与jQuery结合使用时的Ajax交互。 ...
本教程将深入讲解如何在SpringMVC中利用Ajax和JQuery来交互Json数据。 首先,让我们理解什么是Json。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成...
总的来说,SpringMVC结合Ajax提供了一种强大的方式来实现异步图片上传功能,它可以大大提高Web应用的交互性和用户体验。在压缩包`spring_ajax_photo`中,可能包含了实现这一功能的完整源代码,包括前端HTML、CSS、...
结合使用SpringMVC和Ajax,可以实现异步数据交互,提高用户体验。 在SpringMVC中,Ajax请求通常涉及到以下几个关键步骤: 1. **前端准备**: - 首先,你需要在HTML页面中引入jQuery库,因为它是广泛使用的...
SpringMVC 框架在处理 Ajax 请求时需要注意一些重要的配置和设置,以确保请求的正确处理和数据的正确传输。下面我们将介绍在 SpringMVC 中接收 Ajax 请求的注意事项。 基本数据类型参数传输 在 Ajax 请求中,如果...
在SpringMVC中,可以使用Ajax来实现无刷新的交互,比如表单验证、分页或动态加载内容。 接下来,我们讨论OpenCV,这是一个开源的计算机视觉库,广泛应用于图像处理和计算机视觉领域。OpenCV支持多种编程语言,包括...
springMVC支持ajax的jar包,包括 jackson-annotations-2.1.5.jar jackson-core-2.1.4.jar jackson-databind-2.4.3.jar
在开发Web应用时,SpringMVC作为强大的Java后端框架,常常需要与前端进行数据交互。在这种场景下,Ajax技术的运用使得页面无刷新更新成为可能,极大地提升了用户体验。Ajax,全称Asynchronous JavaScript and XML...
在IT行业中,实时交互是提升用户体验的关键因素之一。在本项目中,“后台界面实时获取用户...通过分析这些源码,可以深入了解如何将SpringMVC和Ajax技术结合起来,实现实时获取和处理用户输入,提升Web应用的交互性。
通过“spring_mvc_ajax.zip”中的资源,你可以深入学习和实践SpringMVC与Ajax的集成,了解如何创建一个有效的异步数据交互系统。这个压缩包可能包含了相关的Java代码、HTML模板、JavaScript脚本以及配置文件,供你...
总结一下,SpringMVC通过集成Jackson库,提供了对Ajax请求的高效支持,使得开发者能够方便地处理JSON数据,实现页面的异步更新。在实际项目中,结合前端JavaScript库如jQuery或Vue.js,可以构建出高度交互的Web应用...
在Spring MVC框架中,Ajax(Asynchronous JavaScript and XML)配置主要涉及到的是前后端异步通信,使得用户在不刷新整个页面的情况下,能够与服务器进行数据交互。Ajax技术结合JSON(JavaScript Object Notation)...
在IT行业中,SpringMVC和Ajax是两种广泛使用的技术,它们在构建现代Web应用程序时起着至关重要的作用。本教程将深入探讨如何结合SpringMVC和Ajax实现文件上传功能。 首先,SpringMVC是Spring框架的一部分,它是一个...
在Spring MVC框架中,异步Ajax请求是一种常见的前端与后端交互方式,它允许Web应用在不刷新整个页面的情况下更新部分视图。这种方式极大地提升了用户体验,因为它减少了不必要的数据传输和页面渲染时间。以下是对这...
AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。使用Ajax,可以实现页面的异步交互,提高用户体验。JavaScript库如...
SpringMVC实现前端后台交互传递数据 本篇文章主要介绍了SpringMVC实现前端后台传递数据的方法,其中包括使用Controller接收和传递数据的多种方式,以及配置SpringMVC的基本步骤。 1. 使用Controller接收和传递数据...
当我们谈论"SpringmvcAjax"时,意味着我们要探讨如何在Spring MVC框架下利用Ajax技术实现前后端的数据交互。 首先,让我们深入理解Spring MVC中处理Ajax请求的机制。在Spring MVC中,一个控制器(Controller)类...
在现代Web应用开发中,SpringMVC框架与jQuery AJAX的结合使用是常见且高效的数据交互方式。本示例将深入探讨如何在SpringMVC环境中利用jQuery的AJAX功能实现动态、无刷新的数据交换。 首先,SpringMVC是Spring框架...
综上所述,结合`SpringMVC`和`Ajax`的文件上传解决方案能提供流畅的用户体验,同时短视频背景和`a`标签绑定文件域的技巧进一步提升了界面的交互性。在实际开发中,还需要考虑安全性、错误处理以及性能优化等问题,...
在这个项目中,我们使用了SpringMVC、Ajax以及Highcharts这三种技术来实现一个动态更新的数据统计报表系统。 SpringMVC是Spring框架的一部分,是一个模型-视图-控制器(MVC)架构的Web应用框架。它负责处理HTTP请求...