html ajax请求获取数据到页面

最新推荐文章于 2024-09-04 19:43:42 发布

#老程

最新推荐文章于 2024-09-04 19:43:42 发布

阅读量3.4k

点赞数 2

分类专栏： Java 前端文章标签： html ajax jquery

老程出品

本文链接：https://blog.csdn.net/LuckKing0925/article/details/111321400

版权

前端同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

Java

20 篇文章 1 订阅

订阅专栏

初始文章：纯 HTML 页面发请求获取数据并渲染到页面上

html

<!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> 
  <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_USE
        let 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:'2020/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +
                "{first:'2020/12/15 13:19:30',second:'华中市场部公司揽收成功'}]}," +
                "{logisticsCode:'9958159485614482598',logisticsCompany:'顺丰'," +
                "logisticsInfoList:[" +
                "{first:'2020/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +
                "{first:'2020/12/15 13:19:30',second:'华中市场部公司揽收成功'},"+
                "{first:'2020/12/12 12:20:35',second:'【华中市场部公司】已收件取件人：胡参松(18521118913)'}," +
                "{first:'2020/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("请求处理成功");
    }