如何用Spring MVC和jQuery AJAX实现前端实时获取后端数据？

本文共计637个文字，预计阅读时间需要3分钟。

plaintext控制层包结构包名：com.huak.web.home.health导入：- com.alibaba.fastjson.JSONArray- com.alibaba.fastjson.JSONObject- com.huak.health.type.PollingType- com.huak.tools.HealthItem- com.huak.web.home.BaseController

控制层Controller

package com.huak.web.home.health; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.huak.health.type.PollingType; import com.huak.tools.HealthItem; import com.huak.web.home.BaseController; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.context.request.async.DeferredResult; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Queue; import java.util.concurrent.ConcurrentLinkedQueue; /** * Copyright (C), 2009-2012, XXXX.
* ProjectName:emc
* File name: com.huak.web.home.health
* Author: lichao
* Project:emc
* Version: v 1.0
* Date: 2017/8/22
* Description: 健康指数
* Function List:
*/ @Controller @RequestMapping("/health") public class HealthController extends BaseController { private Logger logger = LoggerFactory.getLogger(this.getClass()); private static Queue CONNECTIONS = new ConcurrentLinkedQueue<>();//消息队列 private static boolean OVER = false;//标识 private final static long TIMEOUT = 20000l;//超时时间 @RequestMapping(method = RequestMethod.GET) public String page(Model model, HttpServletRequest request) { logger.info("跳转健康指数页面"); model.addAttribute("healthItem", JSONArray.toJSONString(HealthItem.HEALTH_ITEM)); return "health/inspect"; } @RequestMapping(value = "/testing",method = RequestMethod.POST) @ResponseBody public void testing( HttpServletRequest request,HttpServletResponse response) { synchronized(this){ CONNECTIONS.clear(); OVER = false; //todo 业务数据入队列 for(int i=0;i<20;i++){ CONNECTIONS.offer(i+"次检测"); } OVER = true; } } /** * * 开启长连接 * @param request * @param response * @return */ @RequestMapping(value = "/polling",method = RequestMethod.GET) public @ResponseBody DeferredResult polling( HttpServletRequest request,HttpServletResponse response) { synchronized(this){ DeferredResult result = new DeferredResult<>(TIMEOUT,null); //设置超时,超时返回null final JSONObject jo = new JSONObject(); if(OVER && CONNECTIONS.isEmpty()){ //消息接收完毕，返回结束标识 jo.put(PollingType.END.getKey(),PollingType.END.getDes()); result.setResult(jo); }else{ //队列取值 final String msg = CONNECTIONS.poll(); jo.put(PollingType.MSG.getKey(),msg); result.setResult(jo); //结束后操作 result.onCompletion(new Runnable() { @Override public void run() { //System.out.println(jo.toJSONString()); } }); } return result; } } } 枚举

package com.huak.health.type; /** * Copyright (C), 2009-2012,XXX.
* ProjectName:emc
* File name: com.huak.health.type
* Author: lichao
* Project:emc
* Version: v 1.0
* Date: 2017/10/11
* Description: 长连接返回标识
* Function List:
*/ public enum PollingType { MSG("msg","消息"), NUM("num","异常数量"), END("end","结束"); private String key; private String des; PollingType(String key, String des) { this.key = key; this.des = des; } public String getKey() { return key; } public void setKey(String key) { this.key = key; } public String getDes() { return des; } public void setDes(String des) { this.des = des; } } js

$(function(){ $("#runbtn").click(function() { polling(); loadRuning1(); }); }); function loadRuning1(){ $.ajax({ url : _web+"/health/testing", type : "POST", cache : false, dataType: "json", success : function(data) { } }); } function polling(){ $.ajax({ url : _web+"/health/polling", type : "GET", timeout:30000, cache : false, dataType:"JSON", success : function(data) { if(data != null && data != ""){ console.info(data); console.info(data.msg); console.info(data.end); if(data.end==null||data.end==""||data.end=="undefined"){ polling(); } }else{ polling(); } }, complete:function(XMLHttpRequest,status){ console.info("status"+status); if(status=='timeout') {//超时,status还有success,error等值的情况 polling(); } } }); } 页面

就是一个按钮绑定上面js事件