教你用JQ怎么循环遍历数据,学会直接月入过万,不够我给你补!

news2024/11/26 7:49:35

1.先看数据类型。这是一个标准得json返回值

{
  "code": 200,
  "msg": "请求成功!",
  "data": [
    {
      "itemName": "给阿姨倒一杯卡布奇诺",
      "unit": "颗",
      "count": 6
    },
    {
      "itemName": "单走一个6",
      "unit": "颗",
      "count": 6
    },
    {
      "itemName": "13张牌你能秒我?",
      "unit": "副",
      "count": 1
    },
    {
      "itemName": "盖亚!~~~",
      "unit": "半口",
      "count": 1
    }
  ]
}

2.再看html的表格,我是循环遍历在表格里面的就是tr和td。这是一个标准的html表格,注意我给了tbody一个id。记住这个id等会要考。

<table border="1" style="border-color:#e5e5e5">
	<thead>
		<tr>
			<th width="250px">项目名称</th>
			<th width="420px">单位</th>
			<th width="150px">数量</th>

		</tr>
	</thead>
	<tbody id="tbody_zd">
		<tr>
			<td>
				<span>111</span>
			</td>
			<td>
				<span>222</span>
			</td>
			<td>
				<span>333</span>
			</td>
		</tr>
	</tbody>
</table>

3.开始遍历,先定义一个空变量,然后再for里面 += 循环拼接,最后再 $("#tbody_zd").html(); html方法里面放你定义的变量

$.ajax({
            url:"https://www.baidu.com",        //请求地址(问号前面就是地址 不需要问号)
            type:'post',    //请求方式(可以是POST或者GET)
            data:{        //请求参数(前面参数冒号后面值 如果是变量不需要引号如果是固定的参数请用引号引起来)
                zd_id:zd_id,    //列子
            },
          
            dataType:'json',        //返回数据格式 (可以是文本可以是网页可以是json数据也可以是jsonp,默认返回json)
            beforeSend: function(){
                //数据开始请求  这里可以写个小特效 比如加载中... 那在请求到了结果可以改成加载完毕
                // $('title').html('数据请求中');//(例子可删)例如改变浏览器标题为数据请求中
            },
            success:function(data){    //请求数据结果
                // $('title').html('数据请求结束');//(例子可删)服务器给出结果了在这里改变下
                if(data.code == 200){
                    
                    console.log(data);
                    
                    $("#zd_id").val(JSON.stringify(data.data));
                    
                    var kong = '';
                    for(var i=0; i<data.data.length; i++){
                        kong +=`
                            <tr>
                                <td>
                                    <span>${data.data[i].itemName}</span>
                                </td>
                                <td>
                                    <span>${data.data[i].unit}</span>
                                </td>
                                <td>
                                    <span>${data.data[i].count}</span>
                                </td>
                            </tr>
                        
                        `;
                    }
                    
                    $("#tbody_zd").html(kong);
                    return false;
                }else{
                    alert(data.msg)
                }
                // console.log(data)    //打印一下请求到的数据
            }
        })
        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2035564.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c语言 图片.bmp读写示例

1 图片.bmp数据结构 BMP&#xff08;Bitmap&#xff09;文件格式是一种简单的位图图像格式&#xff0c;其数据结构分为几个主要部分&#xff1a;文件头、信息头、调色板&#xff08;可选&#xff09;和像素数据。下面是各部分的详细说明。 文件头&#xff08;File Header&…

zabbix看图表的时候标题是乱码

直接进入到&#xff1a;/usr/share/zabbix/assets/fonts 然后进入到windows下边fonts选择一个自己喜欢的字体&#xff0c;上传到/usr/share/zabbix/assets/fonts 然后把内容graphfont.ttff覆盖即可

《网络编程实战系列》(17)网络桥接模式

文章目录 **桥接模式的基本原理****桥接模式的应用场景****桥接模式的优缺点****桥接模式的实现****总结**桥接模式(Bridge Mode)是一种网络配置模式,用于将多个网络接口或网络段连接在一起,使其在逻辑上形成一个单一的网络。这种模式常用于在不同网络之间传递数据包,并使…

超详解Haproxy七层代理及配置

1.七层、四层负载及正、反向代理 1.1四层与七层负载均衡的区别 所谓的四到七层负载均衡&#xff0c;就是在对后台的服务器进行负载均衡时&#xff0c;依据四层的信息或七层的信息来决定怎么样转发流量四层的负载均衡&#xff0c;就是通过发布三层的IP地址(VIP)&#xff0c;然…

C语言—函数栈帧

函数&#xff0c;一般都有返回值&#xff0c;函数名&#xff0c;参数&#xff0c;再下来还有什么mian函数&#xff0c;函数写出来就是要被调用的&#xff0c;上面图片上的代码&#xff0c;main函数和myadd函数&#xff0c;都要在自己的栈结构什么形成自己的栈&#xff0c;可以帮…

如何获取VS Code扩展的版本更新信息

获取VS Code 扩展的版本更新的需求 因为企业内部有架设私有扩展管理器的要求&#xff0c;但是对于一些官方市场的插件&#xff0c;希望可以自动获取这些扩展的更新并上传至私有扩展管理器。于是就有了本篇介绍的需求&#xff1a; 通过API的方式获取VS Code 扩展的更新。 关于…

Spring Boot集成sentinel快速入门Demo

1.什么是sentinel&#xff1f; 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、…

python从入门到精通:判断语句

目录 前言 1、布尔类型和比较运算符 2、if语句的基本格式 3、if else语句 4、if elif else语句 5、判断语句的嵌套 6、实战演练 前言 逻辑判断是生活中常见的行为。同样&#xff0c;在程序中&#xff0c;进行逻辑判断也是最为基础的功能。 判断是程序最基础最核心的逻辑…

远程桌面工具企业版:Splashtop Enterprise

在当今全球化和数字化的商业环境中&#xff0c;远程工作和分布式团队合作成为了新常态。企业需要一种高效、安全的远程桌面解决方案&#xff0c;能够满足不断变化的业务需求&#xff0c;同时确保数据的安全性和员工的生产力。Splashtop Enterprise 是一款为企业量身定制的远程桌…

haproxy负载均衡之-调度算法详解

HAProxy的调度算法分为静态调度算法、动态调度算法和其他调度算法静态算法&#xff1a;按照事先定义好的规则轮询公平调度&#xff0c;不关⼼后端服务器的当前负载、链接数和响应速度等&#xff0c;且⽆法实时修改权重&#xff0c;只能靠重启HAProxy⽣效。动态算法&#xff1a;…

【NI-DAQmx入门】LabVIEW数据采集基础应用程序框架

对于可管理规模的 LabVIEW 程序&#xff0c;分析现有程序或设计新程序的方法通常是从整体到具体&#xff0c;即从高级到低级的分析和设计。从一开始就直接深入细节可能会效率较低。 在设计阶段&#xff0c;开发人员首先将程序垂直划分为几个层级。从最顶层开始&#xff0c;他们…

强化学习之Actor-Critic算法(基于值函数和策略的结合)——以CartPole环境为例

0.简介 DQN算法作为基于值函数的方法代表&#xff0c;基于值函数的方法只学习一个价值函数。REINFORCE算法作为基于策略的方法代表&#xff0c;基于策略的方法只学习一个策略函数。Actor-Critic算法则结合了两种学习方法&#xff0c;其本质是基于策略的方法&#xff0c;因为其目…

element时间段选择器或时间选择器 只设置默认起始时间或者结束时间,不显示问题

element时间段选择器或时间选择器 只设置默认起始时间或者结束时间&#xff0c;不显示问题 <div v-for"(item,index) in [a,b]":key"item"><el-date-pickerv-if"b"v-model"value1[item]"type"datetimerange"value-…

16s功能注释Bugbase的安装使用--本地版

文章目录 概述介绍下载安装程序下载并配置环境安装依赖R包并显示帮助运行示例数据Bug及解决方法-☆ 使用输入文件准备-☆下载Greengenes数据库在QIIME2中操作R语言操作 运行Bugbase 概述 Bugbase依赖于Greegenes1与R 但是R现已更新到4.4以上&#xff0c;安装R包时会不兼容且输…

【时时三省】(C语言基础)结构体初阶

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 结构体的声明 结构的基础知识: 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 数组: 是一组相同类型的元素的集合 结构体: 也是一些值得集合…

python-二进制?十进制?(赛氪OJ)

[题目描述] 给定两个十进制整数 : A&#xff0c;B。 你需要把它们的二进制形式以十进制的运算法则相加输出结果。 例如&#xff1a; A3 , B2的时候&#xff0c;A 的二进制表示是 : 11 , &#x1d435;B 的二进制表示是 10 &#xff0c;你需要输出答案为 : 21。 输入格式…

基于 Flutter 从零开发一款产品(一)—— 跨端开发技术介绍

前言 相信很多开发者在学习技术的过程中&#xff0c;常常会陷入一种误区当中&#xff0c;就是学了很多技术理论知识&#xff0c;但是仍做不出什么产品出来&#xff0c;往往学了很多干货&#xff0c;但是并无实际的用处。其实&#xff0c;不论是做什么&#xff0c;我们都需要从…

嵌入式linux系统镜像制作day1

点击上方"蓝字"关注我们 01、前言 嵌入式设备&#xff08;例如心电图检测仪&#xff0c;售票系统等&#xff09;。尽管&#xff0c;嵌入式设备像那些智能手机一样&#xff0c;绝大多数都使用同样的硬件和软件&#xff0c;包括系统芯片SoC、储存、连接和多媒体接口、…

Could not find artifact net.sf.json-lib:json-lib:jar

一开始我改了maven的setting&#xff0c;由官网变为阿里云仓库&#xff0c;最后还是不行 <dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.0</version><classifier>jdk15</cl…

freeRTOS任务通知(Task Notifications)

目录 前言 一、任务通知概述 1.优势及限制 2.通知状态和通知值 二、任务通知的使用 两类函数 1.xTaskNotifyGive/ulTaskNotifyTake 2.xTaskNotify/xTaskNotifyWait 三、传输计数值代码示例 四、传输任意值代码示例 前言 所谓"任务通知"&#xff0c;你可以反…