jQuery将json性别数据int类型进行格式化渲染
<!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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021.05.31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读