jQuery将json性别数据int类型进行格式化渲染

拼搏现实的明天。 2022-10-10 12:44 115阅读 0赞

<!DOCTYPE HTML>
    <html>
    	<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>
    
    		</style>
    	</head>
    	<body>
    		<div class="contScend"></div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			
    			url: "test.json",
    			data: {},
    			type: "GET",
    			success: function(data) {
    				var html = "";
    				html += '<ul>';
    				$.each(data.data, function(i, item) {
    					html += '<span>' + item.name + '</span>';
    					html += '<span>' + item.sex + '</span>';
    					html += '<span>' + item.contractorName + '</span></li>';
    				});
    				html += '</ul>';
    				$(".contScend").html(html);
    				scroll();
    			}
    		});
    	</script>
    </html>

json

{
    	"msg": "查询成功",
    	"code": 1,
    	"data": [{
    		"name": "承包人ww",
    		"sex": 1,
    		"contractorName": "项目名称"
    	}]
    }

<!DOCTYPE HTML>
    <html>
    	<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>
    
    		</style>
    	</head>
    	<body>
    		<div class="contScend"></div>
    	</body>
    	<script type="text/javascript">
    		$.ajax({
    			
    			url: "test.json",
    			data: {},
    			type: "GET",
    			success: function(data) {
    				var html = "";
    				html += '<ul>';
    				$.each(data.data, function(i, item) {
    					html += '<li><span>' + item.name + '</span>';
    					html += '<span>'+ formatSex(item.sex) + '</span>';
    					html += '<span>' + item.contractorName + '</span></li>';
    				});
    				html += '</ul>';
    				$(".contScend").html(html);
    				scroll();
    			}
    		});
    		
    		// 格式化性别
    		function formatSex(sex) {
    			return sex == 1 ? "男" : "女";
    		}
    	</script>
    </html>

![12b3bfce00ace59400e0f639f29d3858.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[12b3bfce00ace59400e0f639f29d3858.png]: /images/20221005/314444827e734c078084051fe0576c2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/f3ad019e864243808fc09a7b7a445a97.png