JAVA实现JSON后端向前端传递数据

1 后端两个辅助类

ConcurrentDateUtil.Java,用于生成我们需要格式的时间

import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class ConcurrentDateUtil {
  private static ThreadLocal<DateFormat> threadLocal = new ThreadLocal<DateFormat>() {
    @Override
    protected DateFormat initialValue() {
      return new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    }
  };

  public static Date parse(String dateStr) throws ParseException {
    return threadLocal.get().parse(dateStr);
  }

  public static String format(Date date) {
    return threadLocal.get().format(date);
  }
}

JsonResult.java,JsonResult封装,用于后端向前端传递数据

import com.sf.utils.ConcurrentDateUtil;

import java.util.Date;

public class JsonResult<T> {
  public static int NEED_RE_LOGIN = 1;
  public static int NEED_RETRY = 2;

  private int errCode;

  private String message;

  private String timestamp = ConcurrentDateUtil.format(new Date());

  private T data;

  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }

  public String getTimestamp() {
    return timestamp;
  }

  public T getData() {
    return data;
  }

  public void setData(T data) {
    this.data = data;
  }

  public int getErrCode() {
    return errCode;
  }

  public void setErrCode(int errCode) {
    this.errCode = errCode;
  }
}

上面这两个类完成之后,我们就可以在web层的controller中使用JsonResult封装数据并传递到前端。

接下来介绍两种情况,看看前端怎么取数据出来

2 前端JS怎么取出数据

如果后端传给前端的JsonResult封装的是一个Map,例如

@ResponseBody
@RequestMapping(value = "/user/getUserAmount", method = RequestMethod.POST)
public JsonResult<Map<String, Integer>> getUserAmount() {
  JsonResult<Map<String, Integer>> result = new JsonResult<>();
  try {
    //已签到人数
    Integer signedAmount = userService.getSignedAmount();
    //总人数
    Integer totalUserAmount = userService.getTotalUserAmount();
    Map<String, Integer> amountMap = new HashMap<>();
    amountMap.put("signed", signedAmount);
    amountMap.put("sum", totalUserAmount);
    result.setData(amountMap);
    //这里举个例子,如果觉得setData穿的信息不够,还可以用setMessage方法多传一个字符串过去
    result.setMessage("这是签到界面");
  } catch (Exception e) {
    log.warn(ExceptionUtils.getStackTrace(e));
  }
  return result;
}

现在想在前端JS把已签到人数和总人数两个数据取出来,要怎么做呢?只需要在”.”后面跟着Map的Key就好了,如下所示:

function getSignedAmount(){
  $.ajax({
    type: "post",
    url : getContextPath() + "/user/getUserAmount",
    dataType:'json',
    data: {
    },
    success: function(data){
      var amount = data.data;
      //取出总人数
      var totalAmount = amount.sum;
      //总人数减去已经签到的人数,就是未签到的人
      var unsignedNumber = amount.sum-amount.signed;
      //取出后端controller中setMessage方法传过来的字符串
      var logMessage = data.message;
    }
  });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • java web SpringMVC后端传json数据到前端页面实例代码

    下面的后台的代码:目的的查询数据库中的所有省的列表,然后转化为json传到前端页面 @Controller public class DistrictController { @Resource private ProvinceService provinceServiceImp; @Resource private CityService cityServiceImp; @Resource private TourSpotService tourSpotServiceImp; /** * 获取

  • jQuery Ajax前后端使用JSON进行交互示例

    需求: 前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端 这里使用servlet的方式 1.采用$.post方法 index.jsp页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%

  • 关于前后端json数据的发送与接收详解

    前言 最近因为笔者后台使用的是flask框架接收和前端使用的是原生的JavaScript和jQuery的ajax发送,能力有限,在此仅写下我开发项目过程中所得,分享出来供大家参考学习,下面话不多说,跟着小编来一起看看详细的介绍: 一.flask中的json数据接收 1.利用flask的request.form.get()方法 Python后台部分代码 from flask import Flask from flask import jsonify from flask import reque

  • JAVA实现JSON后端向前端传递数据

    1 后端两个辅助类 ConcurrentDateUtil.Java,用于生成我们需要格式的时间 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public class ConcurrentDateUtil { private static ThreadLocal<DateFormat> threadLo

  • java多线程编程之向线程传递数据的三种方法

    在传统的同步开发模式下,当我们调用一个函数时,通过这个函数的参数将数据传入,并通过这个函数的返回值来返回最终的计算结果.但在多线程的异步开发模式下,数据的传递和返回和同步开发模式有很大的区别.由于线程的运行和结束是不可预料的,因此,在传递和返回数据时就无法象函数一样通过函数参数和return语句来返回数据.本文就以上原因介绍了几种用于向线程传递数据的方法,在下一篇文章中将介绍从线程中返回数据的方法. 欲先取之,必先予之.一般在使用线程时都需要有一些初始化数据,然后线程利用这些数据进行加工处理,并

  • 基于django传递数据到后端的例子

    最近遇到一个问题,前端表单我写了多个按钮,每个按钮通过for循环来给name赋值如下: <input type="button" class="btn btn-info btn-xs" name="{{item.document}}" value="解析" οnclick="Parsefunc(this.name)"> 问题是我想要实现点击哪个按钮就传对应按钮的值到后端,对于我这样的前端新手就比

  • SpringMVC实现前端后台交互传递数据

    本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

  • 详解Java中JSON数据的生成与解析

    一.什么是JSON JSON: JavaScript Object Notation JS对象简谱,是一种类似于XML的语言.相比于XML,它更小.更快.更易解析.主要用于项目前端和Server的网络数据传输. 二.JSON的语法 对象 一个对象,由一个大括号表示{},{}中通过一个个的键值对来描述对象的属性 注意: 键与值之间使用冒号连接,多个键值对之间使用逗号分隔. 键值对的键,应使用引号引住(通常Java解析时,键不使用引号会报错,而JS能正确解析):键值对的值,可以是JS中的任意数据类型

  • el-tree树组件懒加载(后端上千条数据前端进行处理)

    目录 实现懒加载tree,需要为tree组件添加lazy和:load="load" 首先,load属性绑定一个懒加载函数,当点击节点时触发 一般是通过树节点id请求后端接口,添加新的节点数据,但我最近遇到的是后端一次性返回上千条数据(树数组结构),由前端进行处理实现懒加载 我们来看下怎么实现 <el-tree ref="tree" lazy :load="load" highlight-current @node-click="h

  • java与JSON数据的转换实例详解

    java与JSON数据的转换实例详解 JSON与JAVA数据的转换(JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互.) 代码中有这么一句,是后台的封装数据. JSONObject jo = JSONObject.fromObject(map); 常见的java代码转换成json --请注意,这个方法曾经给我造成过困惑.因为,它在对Object转换的时候是按照domain类中的所有getXXX()方

  • 使用Java进行Json数据的解析(对象数组的相互嵌套)

    这段时间我们在做一个英语翻译软件的小小小APP,涉及到了对Json数据的解析,所以特地来总结一下! 假设我们要对如下数据进行解析,其实在平时,返回的Json数据是很乱的,很难分清数据的关系,这是经过相关工具美化后的结果 { "translation": [ "爱" ], "basic": { "us-phonetic": "lʌv", "phonetic": "lʌv"

  • php和js如何通过json互相传递数据相关问题探讨

    当我们在结合php和javascript实现某些功能时,经常会用到json.json是js的一种数据格式,可以直接被js解析.而php无法直接读取json数据,但是php提供了json_decode函数来对json数据进行转化,从而可以被php脚本访问.同时,php也提供了json_encode函数来将数据转化成json格式.那么,js中的原生json与php中通过json_encode函数转化后的json是否完全一样呢?今天,站长就和大家一起来探讨这个问题. 我们通过php向javascrip

随机推荐