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

梦里梦外; 2022-10-10 12:37 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][]

[12b3bfce00ace59400e0f639f29d3858.png]: /images/20221005/d96137c8dfb54ffaaa26032405ae9651.png