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

最新推荐文章于 2024-07-30 03:26:49 发布

前端王小婷

最新推荐文章于 2024-07-30 03:26:49 发布

阅读量9.7k

点赞数 9

本文链接：https://blog.csdn.net/weixin_44763569/article/details/106060189

版权

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

摘要由CSDN通过智能技术生成

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

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

一：对于图片数组的渲染

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&