json 后端list 传到前端并遍历

在后端将一个list传到前端。

 list  格式 list 里面的元素为字典:    [{"id": 1, "name": "dddddddddd"}, {"id": 2, "name": "222"}, {"id": 3, "name": "eret"}, {"id": 4, "name": "\u4e01"}, {"id": 5, "name": "2324"}]


 $.get("/classification",function(data,status){
       alert (data);
     var obj= eval(data)//json数据传过来后是字符。需要转化为对象。
     for(var i=0;i<obj.length;i++){
            $('#establish_3').append(`<button type="button" class="btn btn-default" 
id=${obj[i].id}>${obj[i].name}</button>`);
              }
});

注意   其中的  是给其中的id 赋予变量

id=${obj[i].id}

这个问题的答案需要根据具体的后端前端技术来确定。以下是一个基于Node.js和Express框架的后端代码示例,用于将数据传输到前端并在HTML页面中显示。 后端代码: ```javascript const express = require('express'); const app = express(); app.get('/data', (req, res) => { const data = { name: 'John Doe', age: 25, occupation: 'Developer' }; res.json(data); // 将数据以JSON格式发送到前端 }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 在这个示例中,我们使用Express框架创建了一个简单的API,它会在访问`/data`路由时返回一个包含个人信息的JSON对象。 接下来,我们需要在前端页面中使用JavaScript来获取并显示这个数据。以下是一个使用jQuery库的示例: 前端代码: ```html <!DOCTYPE html> <html> <head> <title>Display Data</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1>Personal Information</h1> <div id="data"></div> <script> $(document).ready(() => { $.get('/data', (data) => { // 通过AJAX请求获取数据 $('#data').append(`<p>Name: ${data.name}</p>`); $('#data').append(`<p>Age: ${data.age}</p>`); $('#data').append(`<p>Occupation: ${data.occupation}</p>`); }); }); </script> </body> </html> ``` 在这个示例中,我们使用jQuery的`$.get()`方法向后端发送一个AJAX请求,并在回调函数中使用获取的数据来动态创建HTML元素。这里用到的`$(document).ready()`方法是为了确保DOM已经准备好后再执行JavaScript代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值