初始文章：纯 HTML 页面发请求获取数据并渲染到页面上
html
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>物流信息转图片</title> <script src="/jquery/1.10.2/jquery.min.js"></script> <style type="text/css">*{margin:0px;padding:0px;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;/* -webkit-font-smoothing: antialiased; */-moz-osx-font-smoothing: grayscale;color: #5e6d82;//background-color: #f5f7fa;line-height: 1.5;font-size: 14px;}.receiver-edit{padding: 0px 0px 0px 20px;margin: 20px;width:700px;}.title{font-weight: bold;width:100px;}.dynamic{margin-left:80px;width:100%;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:10px 20px;}.row{clear:both;margin-bottom: 10px;}.firstP{margin-top: 10px;}.row p{float:left;}.hr{width: 800px}body{background-color: #f5f7fa}</style> <script>window.onload = function(){// channelType =ACS & orderId =58968474& type =SELF_USElet channelType = getQueryVariable("channelType")let orderId = getQueryVariable("orderId")let type = getQueryVariable("type")if(!(channelType && orderId && type)){alert("参数不完成!");return}$.ajax({url: "http://localhost:8071/refund/getReceiver.get?channelType="+channelType+"&orderId="+orderId+"&type="+type,type: "get",dataType: "json",success: function(data){/*这个方法里是ajax发送请求成功之后执行的代码*/console.log(data)showData(data.data.data);//我们仅做数据展示},error: function(msg){alert("ajax连接异常："+msg);}});};//展示数据function showData(data) {//var str = "";//定义用于拼接的字符串for (let i = 0; i < data.length; i++) {let str1 = ""let str2 = ""str1 += "<p class='firstP'><span class='title'>物流单号：</span> <span>"+data[i].logisticsCode+"</span></p> <p><span class='title'>物流公司：</span> <span>"+data[i].logisticsCompany+"</span></p><div> <div class='row'><p class='title'>物流动态：</p><div class='dynamic'>"for (let j = 0; j < data[i].logisticsInfoList.length; j++) {//拼接元素str2 +="<div class='row'><p>"+ data[i].logisticsInfoList[j].first + "</p> <p style='padding-left:15px'>"+ data[i].logisticsInfoList[j].second + "</p> </div> "//追加到div中}let strEnd = str1+str2+"</div></div>"if(i!=data.length-1){strEnd += "<hr class='hr'/>"}$("#main").append(strEnd);}//document.getElementById("logisticsNum").innerHTML=data.logisticsCode; //document.getElementById("company").innerHTML=data.logisticsCompany;}//获取url中某参数的值function getQueryVariable(variable){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == variable){return pair[1];}}return(false);}</script></head> <body> <div class="receiver-edit" id="main"> <!-- <p> <span class="title">物流单号：</span><span id="logisticsNum"> </span></p> <p> <span class="title">物流公司：</span><span id="company"> </span></p> <div> <p class="title">物流动态：</p> <div class="dynamic" id="dynamicAddP"> </div> </div> --></div> </body></html>
java
//http://localhost:8071/refund/getReceiver.get@RequestMapping(value = "/getReceiver.get")public JsonDTO getReceiver() {String str ="{data:[" +"{logisticsCode:'9958159485614482598',logisticsCompany:'顺丰'," +"logisticsInfoList:[{first:'/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +"{first:'/12/15 13:19:30',second:'华中市场部公司揽收成功'}]}," +"{logisticsCode:'9958159485614482598',logisticsCompany:'顺丰'," +"logisticsInfoList:[" +"{first:'/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +"{first:'/12/15 13:19:30',second:'华中市场部公司揽收成功'},"+"{first:'/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +"{first:'/12/15 13:19:30',second:'华中市场部公司揽收成功'}]}" +"]}";JSONObject jo = JSONObject.parseObject(str);System.out.println("jo:"+str);return JsonDTO.createInstance().setData(jo).setStatus(JsonDTO.SUCCESS).setMsg("请求处理成功");}
