纯 HTML 页面发请求获取数据并渲染到页面上

刚遇到一个需求：做一个页面，获取物流信息数据渲染到页面上，后台之后会通过页面地址将页面截图返回图片文件，这这这，后面的实现由有点蒙，咱萌新就负责搞个页面渲染数据吧……页面元素很简单，就这点；注意引入 jquery,我用 cdn 的方式引入的<!DOCTYPE html><html lang="en"><head><meta http-equiv="Cont

文章共2,142字 · 阅读需要大约8分钟

一键AI生成摘要，助你高效阅读

问答

#老程

18122人浏览 · 2020-12-17 09:33:26

#老程 · 2020-12-17 09:33:26 发布

刚遇到一个需求：做一个页面，获取物流信息数据渲染到页面上，后台之后会通过页面地址将页面截图返回图片文件，这这这，后面的实现由有点蒙，咱萌新就负责搞个页面渲染数据吧……

页面元素很简单，就这点；注意引入 jquery,我用 cdn 的方式引入的

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>物流信息转图片</title> 
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 
 </head>  
 <body> 
  <div class="receiver-edit"> 
   <p> <span class="title">物流单号：</span>
    <span id="logisticsNum">{{receiverForm.logistics}} </span></p> 
   <p> <span class="title">物流公司：</span>
	<span id="company">{{receiverForm.company}}  </span>
	</p> 
   <div> 
    <p class="title">物流动态：</p> 
    <div class="dynamic" id="dynamicAddP"> 
    
    </div> 
   </div> 
  </div>  
 </body>
</html>

下面的脚本就是 - 发请求 - - 获取数据 - - - 渲染数据

 <script>
window.onload = function(){
        $.ajax({
            url: "http://localhost:8071/refund/getReceiver.get",
            type: "get",
            dataType: "json",
            success: function(data){
                /*这个方法里是ajax发送请求成功之后执行的代码*/
                showData(data.data);//我们仅做数据展示
            },
            error: function(msg){
                alert("ajax连接异常："+msg);
            }
        });
    };
 //展示数据
  function showData(data) {
          var str = "";//定义用于拼接的字符串
          document.getElementById("logisticsNum").innerHTML=data.logistics; 
          document.getElementById("company").innerHTML=data.company; 
          let dynamic = data.dynamic
		  console.log(dynamic)
          for (var i = 0; i < dynamic.length; i++) {
              //拼接元素
              str =
              "<p> <span>"+ dynamic[i].time + "</span> <span style='padding-left:15px'>"
              + dynamic[i].message + "</span> </p> "

           	//追加到div中
              $("#dynamicAddP").append(str);         }
     }
</script>

简单整点样式

<style type="text/css">
        .receiver-edit{
            padding: 0px 0px 0px 20px;
            margin: 20px;
            width:100%;
        }
        .title{
            font-weight: bold;
            width:80px;
        }
        .dynamic{
            margin-left:80px;
			width:80%;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            border-radius: 4px;
            border: 1px solid #EBEEF5;
            background-color: #FFF;
            overflow: hidden;
            color: #303133;
            transition: .3s;
            padding:0 20px;
        }
    </style>

为了测试，随便找个 Controller 写个方法，弄个假数据；
那个转 json 的需要导入：import com.alibaba.fastjson.JSONObject;

//http://localhost:8071/refund/getReceiver.get
    @RequestMapping(value = "/getReceiver.get")
    public JsonDTO getReceiver() {
        String str = "{logistics:'9958159485614482598',company:'顺丰',dynamic:[{time:'2020/12/12 12:20:35',message:'【华中市场部公司】已收件取件人：胡参松(18521118913)'},{time:'2020/12/15 13:19:30',message:'华中市场部公司揽收成功'}]}";
        System.out.println("str:"+str);
        JSONObject jo = JSONObject.parseObject(str);
        System.out.println("jo:"+jo);
        return JsonDTO.createInstance().setData(jo).setStatus(JsonDTO.SUCCESS).setMsg("请求处理成功");
    }