精华内容
下载资源
问答
  • 前端JS var webSocket; webSocket = new WebSocket("ws://localhost:8081/LogManagement/home"); webSocket.onerror = function (event) { alert("连接失败"); alert(event.data ); } webSocket.onopen = function...

    WebScoket特点

    服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,实现真正的双向平等对话。

    前端JS

    var webSocket;
    webSocket = new WebSocket("ws://localhost:8081/LogManagement/home");
    webSocket.onerror = function (event) {
    	alert("连接失败");
    	alert(event.data );
    }
    webSocket.onopen = function (event) {
        alert('连接成功');
    }
    webSocket.onmessage = function (event) {
    	//后端传来的是JSON字符串,前端转为json
    	var data = JSON.parse(event.data);
    	setDisplayNum(data.ERRORToday,data.INFOToday,data.DEBUGToday,data.WARNToday);
     }
    

    后端Java

    创建WebScoketServer类

    @ServerEndpoint(value = "/home")
    @Component
    public class WebSocketServer {
    
        @Autowired
        LogController logController;
        //用来记录当前在线连接数,线程安全。
        private static int onlineCount = 0;
    
        //线程安全Set,存放每个客户端的MyWebSocket对象。
        private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    
        //与某个客户端的连接会话
        private Session session;
    
        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(Session session) {
            System.out.println(session.getAsyncRemote());
            this.session = session;
            webSocketSet.add(this);     //加入set中
            addOnlineCount();           //在线数加1
            sendMessage("有新连接加入!当前在线人数为" + getOnlineCount());
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            webSocketSet.remove(this);  //从set中删除
            subOnlineCount();           //在线数减1
            sendMessage("有用户退出!当前在线人数为" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("来自客户端的消息:" + message);
            //群发消息
            sendInfo("服务端返回:" + session.getId() + "-" + message);
        }
    
        /**
         * 发生错误时调用
         *
         * @OnError
         **/
        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
        /**
         * 向客户端发送消息
         *
         * @param message 消息内容
         */
        private void sendMessage(String message) {
            this.session.getAsyncRemote().sendText(message);
        }
    
        private void sendMessage2(Map<String,Object> map) {
            this.session.getAsyncRemote().sendObject(map);
        }
    
    
        /**
         * 群发自定义消息
         */
        public void sendInfo(String message) {
            try {
                for (WebSocketServer item : webSocketSet) {
                    item.sendMessage(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        public static synchronized int getOnlineCount() {
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
            WebSocketServer.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
            WebSocketServer.onlineCount--;
        }
    }
    

    使用定时器获取数据,群发给前端

    @Scheduled(fixedDelay = 1000 * 2)
    public Map<String, Object> getData() {
        String indexName = "log_log";
        Map<String, Object> map = logService.getLogStatistic(indexName);
        webSocketServer.sendInfo(JSON.toJSONString(map));
        return map;
    }
    

    开启SpringBoot定时器

    在启动类加注解: @EnableScheduling
    在需要定时的方法加注解: @Scheduled(fixedDelay = 1000 * 2) 表示2秒

    pom中加入webscoket依赖

     <!-- WebSocket -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
        <version>2.0.4.RELEASE</version>
    </dependency>
    
    展开全文
  • 如果后端实时推送数据前端,那么可以使用websocket的方式。 方法如下: getList() { let socket = new WebSocket("ws://127.0.0.1:10000/websocketPush/1"); // 打开 socket.onopen = () => { console.log...

    如果后端实时推送数据给前端,那么可以使用websocket的方式。
    方法如下:

        getList() {
       
          let socket = new WebSocket("ws://127.0.0.1:10000/websocketPush/1");
          // 打开
          socket.onopen = () => 
    展开全文
  • 前端获取后端数据

    千次阅读 2021-04-16 23:49:54
    前端获取后端数据 前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。 前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。 用了网上一个不太友好...

    前端获取后端数据

    前阵子做个项目,因为涉及到前端代码,奈何前端知识有限,有个问题搞了好久。

    前端的js里需要一个数组,我后端都封装好了,但是这短短的距离我却不知道怎么拿过去前端的js。

    用了网上一个不太友好的方法:

    • 先用input从后端拿到前端的body

      <input type="hidden" th:value="${address}" id="address"/>
      
    • 再用document.getElementById拿到js,但是这样如果是传数组会出错

      var address = document.getElementById("address").value;
      

    正好今晚周末,宿舍的前端大佬实习回来,我问了一下前端一般都是怎么拿到后端传过来的数据。

    接下来便是一顿操作:

    • 首先导入JQuery

    • 再写ajax代码访问后端接口

      $.ajax({
              url:'/heap',	//这是后端接口的url
              method:'get',
              success:function (res) {
                  //res便是的数据便是后端拿到的数据
                  //这里需要注意:res为局部变量,
                  //所以需要在方法外定义一个变量把res赋值给他,才能在方法之外使用。
              },
          })
      
    • 后端接口便是我们java开发最熟悉不过的controller类了

      //测试接口
          @RequestMapping("/heap")
          public String heap(){
              String adds = "前端获取的res为该值";
              return adds;
          }
      

    大功告成!
    掌声

    展开全文
  • ,方便前端解析,所以我们需要将后端数据转化成json字符串的格式,从前端获取到后再解析为js对象或者数组,当然也可以倒过来操作,这个时候有好几种java数据和json之间相互转化的工具,这里我用了 fastjson : ...

           一切问题的起源在于我需要向数据库里拿信息,并且动态更新在当前网页中。这句话虽然短,但是却要做相当量的处理。
           首先仅仅使用jsp是不行的,说实在java代码我觉得就不应该多写在html网页中,他和html代码和js代码是不能相互处理赋值的,只能各显示各的,所以不能通过java代码在jsp页面直接获取数据的数据。想要不刷新页面而且动态的更新页面的数据,还是需要ajax。
           这里我使用了jquery的ajax,基本上用的都是post,即

    $.post("Servlet", {
    	"param":value
    	}, function (data, status) {
    	})
    

           post方法有三个参数:

    • 第一个是url,像web项目第一个一般就是某个Servlet
    • 第二个参数是一个对象,里面放若干个键值对,其中键用字符串,你可以在请求的Servlet中直接使用 ==request.getParameter(“param”) ==来获取传过来的参数,默认为字符串;
    • 第三个参数是回调函数,指请求成功后执行的操作,data和status是默认的参数,前者是后端响应的数据==(字符串)==,后者是状态信息。
    • 我们可以在Servlet的doGet/doPost方法的最后写上:
    response.setCharacterEncoding("UTF-8");
    response.getWriter().append(String);
    

    这样,就可以把后端的字符串传到前端了,在回调函数中对data进行操作。(第一个是设置响应的编码,如果不设置有可能会出现乱码)

           那么问题来了,java数组,java字符串和js数组,js字符串是不互通的,之间连接的桥梁就是字符串,还得是json字符串的格式,方便前端解析,所以我们需要将后端的数据转化成json字符串的格式,从前端获取到后再解析为js对象或者数组,当然也可以倒过来操作,这个时候有好几种java数据和json之间相互转化的工具,这里我用了fastjson

    • 当然首先我们要导入这个jar包;
    • java数组,集合或是对象转化为json字符串的格式一般用到的是fastjson里的JSON类和==JSON.toJSONString(object)=这个方法:
    import com.alibaba.fastjson.JSON;
    JSON.toJSONString(object);
    

           其中这个方法里的参数你可以放数组集合或是一个Bean对象(一个实体类对象),这个方法都可以自动转化相应的json字符串格式,不过通常我们会封装一个响应实体类:

    public class ResponseBean {
    	private Object object;
    	private int status;
    	private String statusMsg;
    	public ResponseBean() {}
    	public ResponseBean(int status, String statusMsg) {
    		super();
    		this.status = status;
    		this.statusMsg = statusMsg;
    	}
    	public ResponseBean(Object object, int status, String statusMsg) {
    		this.object = object;
    		this.status = status;
    		this.statusMsg = statusMsg;
    	}
    	public Object getObject() {
    		return object;
    	}
    	public int getStatus() {
    		return status;
    	}
    	public String getStatusMsg() {
    		return statusMsg;
    	}
    	public void setObject(Object object) {
    		this.object = object;
    	}
    	public void setStatus(int status) {
    		this.status = status;
    	}
    	public void setStatusMsg(String statusMsg) {
    		this.statusMsg = statusMsg;
    	}
    	@Override
    	public String toString() {
    		return "ResponseBean [object=" + object + ", status=" + status + ", statusMsg=" + statusMsg + "]";
    	}
    }
    

           我们一般每次在向前端返回数据的时候都会把响应的结果封装为一个对象,再将其转化为json字符串,到前台解析的就是一个js对象,一把来说这个响应实体类包含三个成员变量:响应的数据,响应的状态,响应状态信息,其中java数组,集合或是对象直接赋给成员变量object就行,不需要再转换为字符串再赋值给object,只需要将这个响应实体类转化为json字符串的格式再返回到前台即可。

    • 前端回调函数中的data就是这个对象,当然先要将json字符串进行解析:
    var response = JSON.parse(data);
    if(response.status == ){}
    if(response.object == undefined){}
    
    • 首先我们可以先根据状态码来判断返回的结果,其次因为构造方法里可以不对object进行赋值,所以在响应的数据为空的时候可以对其判断是否为undefined来进行进一步操作。
    • 下面这一点非常重要,ajax请求都是需要时间的,即使是本地也需要,一般来说会慢于正常代码的执行速度,如果你在执行ajax的时候post后面还跟有其他的方法或代码,由于ajax是异步的,你的网页会继续向下执行,导致post后面的代码早于其执行
    • 解决方法一个是尽量不要在post方法后继续写代码(有点极端)
    • 另一个可以讲后续代码放在post的回调函数中
    • 设置后续代码延迟执行setTimeout
    • 或是使用async和awiat关键字(大家可以去了解一下)
      当然如果你想把前台的数组或是对象返回给后台进行解析,fastjson也可以做到,不过要使用到JSONArray类:
    import com.alibaba.fastjson.JSONArray;
    JSONArray javaList = JSONArray.parseArray(jsonString); // 将js数组转化为java可以识别的集合
    //使用方法和list基本一样,size(),get(index)
    
    List<T> users2 = JSON.parseArray(jsonString, T.class); //这个方法就是将js对象转化为java中的list集合,
    //不过要放入响应的实体类
    

    基本上就已经完成了前后端数据的交互,如果前端使用了vue就轻松了很多,直接把绑定的data值一更新,页面就也跟着动态更新了;如果没有用就需要用jquery自己手动操作dom了。

    展开全文
  • 以ASP.NET的MVC为例,利用jQuery的Ajax方法,1.前端后端分别获取文本数据及数据库数据;2.前端数据传递给后端
  • 前端实时更新后端处理进度

    万次阅读 多人点赞 2017-05-24 19:38:17
    前端根据后台的处理进度实时更新进度条。 功能实现:HTML Html页面用boostrap的进度条, 进度条由2个div嵌套而成,修改内层div的width可以更新进度,外层div(id="prog_out") , 内层div(id="prog_in"); 给button...
  • 微信小程序前端获取后端数据

    千次阅读 2019-01-26 19:57:37
    <!--index.wxml--> <view>{{webMessage}} <button bindtap="getMessage"> 测试 ... protected void service...这个测试是对于小程序如何获取到服务器内容并输出   如有错误望告知,非常感谢
  • 前端 需注意:需要连接网络才可以使用,因为引入的echarst和vue和jquery都是访问网上的。 柱状图 var vm=new Vue({ el:#main, data:{ name:[中国,美国], type:[2,1] }, methods:{ //...
  • 首先安装axios npm install axios 定义request.js request.js import axios from 'axios' const instance = axios.create({ baseURL: "http://localhost:8081", //服务器ip...import request from '@/utlis/r
  • 大家要用到Handlebars 这里推荐教程网站 http://www.cnblogs.com/iyangyuan/p/3471300.html
  • 1、实现 1、通过Easy Mock 来实现接口的模拟 传送门 2、通过Postman来查看数据是否可以获取传送门
  • 前端后端获取数据的三种方法:ajax、axios、fetch 1、jQuery中的ajax get方法: $.ajax({ url:"v4/api/film/now-playing?t=1539401039415&page=1&count=5",  type:"GET",  success:(result)=>...
  • 前端发送请求,后端如何接收数据

    万次阅读 多人点赞 2019-05-20 20:22:52
    本文中使用Postman来...2.后端进行接收,我们这里写的是,使用Controller接收,当然也可以使用servlet类,只要能获取到请求request。 @CrossOrigin @RequestMapping(value = "/api/findBookByName", method = ...
  • 前端如何获取后端传递的JSON字段值

    千次阅读 2019-05-23 09:56:26
    后端传来Json如下: data="{\"username\":\"jack\",\"password\":\"123\",\"userList\":[{\"id\":14,\"nikeName\":\"324234\"}]}" 现在要获取到这个Json字段的值 step1: 解析Json串 var v = JSON.parse(data)...
  • 一、前端js,jQ获取后端(ModelAndView)的数据 1、将model中的值赋给hidden,然后Js获取隐藏域的值。 后台的实现: @RequestMapping("/QEditorMod1") public String QEditorMod1(ModelMap model){ model....
  • 前端笔记-freemarker模板获取后端数据及提交数据

    万次阅读 多人点赞 2019-12-09 10:54:52
    这里面表单的数据都是从后端获取的,点获取数据,会调用getRecord方法从数据库获取数据。 点击提交备注,是备注可以让用户填写。 提交后,更新数据库中的数据。 在freemarker中使用${xxxx},这种方式获取单条的...
  • vue前端抓取数据到方法? 传到后端接收再存储在map里? 如何实现
  • springMvc中前端获取后台数据的方式

    千次阅读 2019-09-01 18:07:07
    最新项目中需要用到不跳转获取后台数据(List对象集合),百度操作一波,发现CSDN的帖子真水,根本没有一遍讲的比较全面的,而且帖子大多数是错的(可能作者执行成功了,但是那只是你刚好条件巧合罢了,换个条件,你...
  • 从api接口正确返回中写入 methods:{ btn () { queryservice(list) .then((res) => { this.serve = res.data for (let i = 0 ;i < this.serve.length;... this.serve[i].createTime = this.serve[i]....
  • 欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640 当后端返回的数据不是我们需要的格式或者字段名不匹配的情况下,后端又不方便修改,前端该怎么来处理呢,下面我列出了几种情况: 一.数组对象不匹配 ...
  • Hbuilder X 前端获取后端数据

    千次阅读 2020-09-14 13:43:59
    Hbuilder X 前端获取后端数据 1.创建appUser.js文件 // 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分) let getAppUserUrl = '/user/getAppUser'; // 此处第二个参数vm,就是我们在页面...
  • vue前端与Django后端数据交互

    千次阅读 2021-02-22 16:56:49
    本文简单记录了vue前端与Django后端数据交互
  • 比如数据分为A/B/C/D/E五种类型甚至更多,五种数据类型的属性大部分相同,但是每一种都有自己的特殊属性,现在需要实现另个相关功能,需要前端提供从接口中获取回来的数据,但是每一种类型要传给后端数据都不相同...
  • 后端获取前端数据三种方式

    千次阅读 2019-12-23 15:25:01
    前端发出的请求:path?id=1; @RequestMapper(value="path") public void test(@RequestParam("id") int id){ System.out.println(id); } @PathVariable 前端发出的请求:path/{id}; @RequestMapper(value="path/...
  • thymeleaf获取后端数据

    千次阅读 2019-12-17 09:19:56
    通常需要从后端拉取数据形成下拉框 当返回元素是 list userNameList = userServiceImpl.findUserName() <select> <option th:each="value,iter:${@userServiceImpl.findUserName() }" th:value="${value}...
  • 第一种情况,比如后端传给前端的是{2:"abc"} 第二种情况,比如后端传给前端的是{"01":abc}
  • 效果图: js ajax请求到后端获取到map,然后在ajax success 返回函数通过$("#id").val(data.key) 后端传值:
  • vue 获取后端数据

    千次阅读 2018-03-18 16:01:00
    1、vue-resource从后端请求我们...模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , 在webpack.dev.conf.js这个文件中编辑。 圈1//webpack.dev.conf.js ...
  • Post 方法 传参数据必须放在消息主体中 this.$axios.post(url, {a: '1'}) .then(response => { //成功返回 console.log(response); }) .catch(error => { //失败返回 console.log(error); }); axios底层方法 this.$...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 140,338
精华内容 56,135
关键字:

前端实时获取后端数据