首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery将json性别数据int类型进行格式化渲染

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

作者头像
王小婷
发布于 2025-05-20 02:54:57
发布于 2025-05-20 02:54:57
5300
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "msg": "查询成功",
    "code": 1,
    "data": [{
        "name": "承包人ww",
        "sex": 1,
        "contractorName": "项目名称"
    }]
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
[{"name":"体验区统计","numb":0},{"name":"test909","numb":0},{"name":"test910","numb":0},{"name":"111","numb":0},{"name":"test","numb":0},{"name":"test11111","numb":0},{"name":"记忆区统计","numb":0}] 代码: <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org">
王小婷
2022/01/09
5930
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
jQuery数据结构渲染(4):复选框checkbox赋值
1:当返回值是字符串的时候 data.json: { "circle": "2;3;4;5;6;1" } 示例代码: <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="viewport" content="width=device-width, initial-scale=1">
王小婷
2020/05/18
1.3K0
jQuery数据结构渲染(4):复选框checkbox赋值
jQuery实现消息滚动播放的效果
场景需求: 在大屏幕上,消息会进行一个实时滚动播报的效果,将现有的内容进行一个来回滚动的播放~~
王小婷
2021/04/04
5.6K0
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
提交格式 "workFences": [ { "fenceId": "ew32w2wf232fwer23", "fenceName": "区域q" }, { "fenceId": "ew32w2wf232fw543r23", "fenceName": "区域b" } ], test.json {"msg":"查询成功","code":1,
王小婷
2022/03/29
3K0
JQuery 获取选中select下拉框的value和text的值,合并成数组传给后端
数组each遍历渲染如何给第一个div添加class
数组each遍历渲染如何给第一个div添加class 并且在点击每个div的时候,有被选中的效果 其他div背景颜色移除 被点击的div背景颜色添加。
王小婷
2021/06/10
1.7K0
JQuery 获取选中checkbox多选框的value,合并成数组传给后台
需求: JQuery 获取选中多选框的value,合并成数组传给后台 在ajax请求的时候,需要给后端传一个参数 deviceId,这个 deviceId是一个list集合,也就是一个数组,需要把选中的几个数值放在这个数组里面,当做参数传递。
王小婷
2022/01/09
3.4K0
JQuery 获取选中checkbox多选框的value,合并成数组传给后台
jQuery数据结构渲染(1):图片数组的渲染
作为一个前端开发,在日常工作中,会不断的请求接口,调用接口,再对接口的数据进行一定的处理,渲染在前端界面,尤其是在今天前后端分离的时代,这项技能是每个前端开发必备~
王小婷
2020/05/18
2.3K0
jQuery数据结构渲染(1):图片数组的渲染
jQuery :contains 选择器
经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素(如下面的例子)。
王小婷
2021/07/08
7280
jQuery数据结构渲染(2):时间戳的处理
时间的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">
王小婷
2020/05/18
7570
jQuery数据结构渲染(2):时间戳的处理
复选框checkbox提交数据类型和方法
对应的渲染方法如下: jQuery数据结构渲染(4):复选框checkbox赋值 https://www.jianshu.com/p/3878ff8c76d9
王小婷
2020/05/26
1.5K0
复选框checkbox提交数据类型和方法
jQuery数据结构渲染(3):文本和input/textarea框赋值
json数据格式如下: data.json: { "configName": "英语测试作业", "promoter": "王小婷", "suggestion": "单词量不够,多背诵一点哦" } 1:div等文本或者textarea多行文本框赋值,使用.text()的方法赋值 $("#promoter").text(data.promoter); $("#suggestion").text(data.suggestion); 2:in
王小婷
2020/05/18
9460
jQuery带参数跳转,新页面获取url的参数id
a.html <!DOCTYPE HTML> <html> <head> <title></title> <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
王小婷
2021/06/24
3.7K0
javascript escape()和unescape()区别
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
王小婷
2021/07/13
2.1K1
把https地址作为变量拼接在link/script 内部
下面是之前写的一个交互的例子,直接拿过来用一用啦,最主要的在于将把https地址作为变量拼接在link/script 内部,其余的都是次要的。
王小婷
2020/12/29
9410
jQuery搜索框,输入文字键盘抬起,显示返回值列表
王小婷
2025/05/19
1260
jQuery搜索框,输入文字键盘抬起,显示返回值列表
JavaScript split() 方法
运用: 将json数据里面的字符串类型的数据"00,01,02,03,04"转化成数组,再将数组遍历出来,分别赋值到每一个div里面。
王小婷
2021/03/15
1K0
jquery点击按钮,添加一行input输入框
点击添加按钮的时候,会添加一行input输入框,使用jquery来实现一下。虽然现在前端开发小伙伴们都不用jquery了,但是,我还是决定要记录一下这个小demo,因为用到的比较多。
王小婷
2020/09/27
5.2K0
jQuery点击图片开启,再次点击图片关闭效果
要求:jQuery点击图片开启,再次点击图片关闭效果 2:获取选中的图片的状态 并以整型的格式传给后端
王小婷
2025/05/19
3450
jQuery点击图片开启,再次点击图片关闭效果
jquery多组时间以对象数组形式保存
需求: 1:点击新增区域的按钮的时候,会新增一行输入框,可以选择输入数据,输入时间 2:输入完成之后,点击保存按钮,将输入的时间以对象数组的格式提交给后端 3:每一组时间是一个对象,每个对象包括开始时间和结束时间, 三组就是三个对象,存放在数组里面。 提交到后端的格式 {"criminalFences":[{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00","stopTime":"17:00"},{"startTime":"09:00"
王小婷
2020/09/27
1.1K0
jQuery带参跳转新页面,新页面获取url多个参数的办法
需求: a页面有多个参数 跳转到b页面 在b页面获取a页面带过来的参数 a.html
王小婷
2021/06/29
2.9K0
推荐阅读
相关推荐
jQuery数据渲染,每行显示4个数据,超过四条数据自动换行
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验