美文网首页
jQuery将json性别数据int类型进行格式化渲染

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

作者: 祈澈菇凉 | 来源:发表于2021-05-31 12:28 被阅读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>

相关文章

网友评论

      本文标题:jQuery将json性别数据int类型进行格式化渲染

      本文链接:https://www.haomeiwen.com/subject/okcfsltx.html