jQuery+ajax请求数据，渲染到前端界面

旧城等待， 2023-03-13 05:51 26阅读 0赞

作为一个前端开发，在日常工作中，会不断的请求接口，调用接口，再对接口的数据进行一定的处理，渲染在前端界面，尤其是在今天前后端分离的时代，这项技能是每个前端开发必备~

这里就简单的记录工作之中遇到的一些常见的对数据处理的方法，今天要说的是遇到了数组格式的图片的时候，该怎么处理。

##### 一：对于图片数组的渲染 #####

data.json:

{
    	"pics": ["img/p15.png", "img/p16.png","img/p17.png"]
    }

代码示例：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>jQuery数据处理（1）：图片数组的渲染</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    	</head>
    	<body>
    	<div class="pics"></div>
    	</body>
    	<script type="text/javascript">
    			$.ajax({
    				url: "data.json",
    				type: 'GET',
    				dataType: 'json',
    				success: function(data) {
    					//图片数组的渲染
    					var srcHtml = '';
    					$.each(data.pics, function(i, item) {
    						srcHtml += '<img src="' + item + '"/>';
    					})
    					$(".pics").html(srcHtml)
    				}
    			});
    	</script>
    </html>

好的，打开浏览器，效果如下。

![format_png][]

##### 二：对于时间戳的处理 #####

时间的json数据格式：data.json

{"commitTime": 1588061853944}

示例代码：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>jQuery数据结构渲染（2）：时间戳的处理</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    	</head>
    	<body>
    		时间:<div id="commintTime"></div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			url: "data.json",
    			type: 'GET',
    			dataType: 'json',
    			success: function(data) {
    				//
    				var htm = '';
    				htm += '' + formatTime(data.commintTime) + '';
    				$('#commintTime').html(htm)
    			}
    		});
    		//格式化时间，时间戳的处理
    		function formatTime(commintTime) {
    			var date = new Date();
    			//date.setTime(value);
    			var month = date.getMonth() + 1;
    			var hours = date.getHours();
    			if (hours < 10)
    				hours = "0" + hours;
    			var minutes = date.getMinutes();
    			if (minutes < 10)
    				minutes = "0" + minutes;
    			var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
    				" " + hours + ":" + minutes;
    			return time;
    		}
    	</script>
    </html>

显示：  
![format_png 1][]

##### 三：文本和input/textarea框赋值 #####

json数据格式如下：  
data.json：

{	
    	"configName": "英语测试作业",
    	"promoter": "王小婷",	
    	"suggestion": "单词量不够，多背诵一点哦"
    }

1：div等文本或者textarea多行文本框赋值，使用.text()的方法赋值

$("#promoter").text(data.promoter);                 
    $("#suggestion").text(data.suggestion);

2:input框里面，使用.val()的方法赋值

$("#configName").val(data.configName);

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>jQuery数据结构渲染（3）：文本和input/textarea框赋值</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    	</head>
    	<body>		
    	
    		作业名称:<input type="text"  id="configName">
    		发起人:<div id="promoter"></div>
    		审批意见:<textarea id="suggestion" rows="4" cols="30"></textarea>		
    	</body>
    	<script type="text/javascript">
    			$.ajax({
    				url: "data.json",
    				type: 'GET',
    				dataType: 'json',
    				success: function(data) {
    					$("#configName").val(data.configName);
    					$("#promoter").text(data.promoter);					
    					$("#suggestion").text(data.suggestion);					
    				}
    			});
    	</script>
    </html>

##### 四：复选框checkbox赋值 #####

1：当返回值是字符串的时候  
data.json:

{	
    	"circle": "2;3;4;5;6;1"	
    }

示例代码：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>复选框checkbox自定义样式</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    		<style>
    			input[type=checkbox]{
                        appearance:none;
                        -moz-appearance:none; /* Firefox */
                        -webkit-appearance:none;                 
                        cursor: pointer;
                        margin:0;
                    }                   
                    input[type=checkbox]{
                        width:13px;
                        height:13px;                  
                        background: url(images/check.png);
                        background-size: 100% 100%;
                    }           
                    input[type=checkbox]:checked{
                        background: url(images/checked.png);
                        background-size: 100% 100%;
                    }
        </style>
    	</head>
    	<body>
    		<div class="modal-body form">
    			<div class="col-md-7 col-sm-7  col-xs-7">
    				<input name="circle" type="checkbox" value="2" />周一
    				<input name="circle" type="checkbox" value="3" />周二
    				<input name="circle" type="checkbox" value="4" />周三
    				<input name="circle" type="checkbox" value="5" />周四
    				<input name="circle" type="checkbox" value="6" />周五
    				<input name="circle" type="checkbox" value="7" />周六
    				<input name="circle" type="checkbox" value="1" />周日
    			</div>
    		</div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			url: "data.json",
    			type: 'GET',
    			dataType: 'json',
    			success: function(data) {
    				$.each(data.circle.split(";"), function(i, item) {
    					$('input[name="circle"][value="' + item + '"]').attr('checked', 'checked')								
    				}) 
    			}
    		});
    	</script>
    </html>

![format_png 2][]

2：当返回值是数组对象的时候  
data.json:

{	
    	"tasks": [{
    		"id": 1,
    		"name": "任务一"		
    	}, {
    		"id": 2,
    		"name": "任务二"		
    	},{
    		"id": 3,
    		"name": "任务三"		
    	},{
    		"id": 4,
    		"name": "任务四"		
    	}]
    }

参考代码：

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>复选框赋值</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    		<style>
    			input[type=checkbox]{
                        appearance:none;
                        -moz-appearance:none; /* Firefox */
                        -webkit-appearance:none;                 
                        cursor: pointer;
                        margin:0;
                    }                   
                    input[type=checkbox]{
                        width:13px;
                        height:13px;                  
                        background: url(images/check.png);
                        background-size: 100% 100%;
    					margin-right:8px;
                    }           
                    input[type=checkbox]:checked{
                        background: url(images/checked.png);
                        background-size: 100% 100%;
                    }
        </style>
    	</head>
    	<body>
    		<div class="workQueryList">
    		</div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			url: "data.json",
    			type: 'GET',
    			dataType: 'json',
    			success: function(data) {
    				//checkbox渲染
    				var htmlQuery = "";
    				$.each(data.tasks,function(i, item) {
    					htmlQuery += '<input name="query" type="checkbox" checked="checked" value="' + item.id + '" /><span>'
    					+ item.name
    					+ '</span></br>';
    				})
    				$(".workQueryList").html(htmlQuery)
    			}
    		});
    	</script>
    </html>

显示如下  
![format_png 3][]

3：当返回值是数组字符串的时候

{
    	"permTokens": ["site", "alarm", "distribution", "my"],	
    }

示例代码

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<head>
    		<title>复选框赋值</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    		<style>
    			input[type=checkbox]{
                        appearance:none;
                        -moz-appearance:none; /* Firefox */
                        -webkit-appearance:none;                 
                        cursor: pointer;
                        margin:0;
                    }                   
                    input[type=checkbox]{
                        width:13px;
                        height:13px;                  
                        background: url(images/check.png);
                        background-size: 100% 100%;
                        margin-right:8px;
                    }           
                    input[type=checkbox]:checked{
                        background: url(images/checked.png);
                        background-size: 100% 100%;
                    }
        </style>
    	</head>
    	<body>
    		<div class="col-md-5 col-sm-5  col-xs-5  workModelList">
    			<input type="checkbox" name='appModel' value="site">位置
    			<input type="checkbox" name='appModel' value="alarm">告警
    			<input type="checkbox" name='appModel' value="distribution">分布
    			<input type="checkbox" name='appModel' value="my">我的
    			<input type="checkbox" name='appModel' value="work">作业管理
    			<input type="checkbox" name='appModel' value="partol">电子巡更
    			<input type="checkbox" name='appModel' value="person">员工管理
    
    		</div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			url: "data.json",
    			type: 'GET',
    			dataType: 'json',
    			success: function(data) {
    				$.each(data.permTokens, function(i, item) {
    					$('input[value="' + item + '"]').attr("checked", "checked")
    					
    				})
    			}
    		});
    	</script>
    </html>

![format_png 4][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[format_png]: /images/20230312/0a1aeb980e6345c8bb329037960d2e30.png
[format_png 1]: /images/20230312/c82c5138c0c84de9937e37134560d352.png
[format_png 2]: /images/20230312/d65265ba74f841ceb8bdfdb5e747a0da.png
[format_png 3]: /images/20230312/9dd0de9fc69541a8af1f43ea6cd4bc55.png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTU3MjAwMjE5MWM0ZGE3YzQucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200511183901264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center