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

原创 于 2020-05-11 18:39:17 发布
· 9.8k 阅读 · 67 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了前端开发中如何使用jQuery和ajax请求数据，并详细讲解了如何处理图片数组、时间戳，以及如何对文本、input/textarea和复选框进行赋值。在前后端分离的背景下，这些技巧对于前端开发者至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

一：对于图片数组的渲染

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>

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

二：对于时间戳的处理

时间的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>

显示：

三：文本和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>

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>

显示如下

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>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值