数据库: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 jQuery ajax交互的简单的应用,一个可以参照的文件
SpringMVC利用Ajax,JQuery交互Json
springmvc接收ajax请求注意事项
springMVC支持ajax的jar包,包括 jackson-annotations-2.1.5.jar jackson-core-2.1.4.jar jackson-databind-2.4.3.jar
使用springMVC+ajax+json的一个小demo,希望对读者有用
http://blog.csdn.net/madcode2222222222222/article/details/78326347
springmvc+ajax上传例子
Springmvc与Ajax交互实例
三个ajax与springmvc的交互的demo
后台界面实时获取用户输入内容,springMVC+Ajax实现(源码)
SpringMVC+Ajax异步文件上传+短视频背景+a标签绑定文件域
使用Ajax从页面向控制层请求数据,并将提交的数据再次返回,国外网站下载代码,很有参考意义。请使用Eclipse工具
配置opencv3.4.1时,包含库的名称又不是opencv_word的形式了,这里列了一下需要包含的lib名称。同时包含了congtrib3.4.1的压缩包
NULL 博文链接:https://stillcoolme.iteye.com/blog/2313624
NULL 博文链接:https://cdxs2.iteye.com/blog/1950519
本篇文章主要介绍了SpringMVC实现前端后台传递数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
jackson-annotations-2.4.6.jar jackson-core-2.5.0.jar jackson-databind-2.4.6.1.jar
SpringMVC框架下使用jQueryAJAX进行数据交互的一个DEMO http://blog.csdn.net/lazyrabbitlll/article/details/78615309
jackson-annotations-2.9.6.jar,jackson-core-2.9.6.jar,jackson-databind-2.9.6.jar
springmvc和ajax下的上传图片,界面设计符合手机(已上线)