jquery如何通过ajax请求获取后台数据——分配列表

最新推荐文章于 2025-07-14 20:11:55 发布

转载最新推荐文章于 2025-07-14 20:11:55 发布 · 2.2k 阅读

php 同时被 3 个专栏收录

8 篇文章

订阅专栏

html

3 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

博客介绍了引入jQuery进行数据处理的相关内容，包含HTML和JS代码。重点讲解了三种循环数据的方法，如for in循环，还提及each方法。同时介绍了获取对象属性、jQuery添加节点的方法，以及对数据中is_true和device字段的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入jquery

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>

html代码

<table id='tabletest'>

</table>

js代码

三种循环数据

使用for in

$(function(){$ .ajax({
url:’data.json’,
type:’get’,
dataType:’json’,
success:function(data){
//方法中传入的参数data为后台获取的数据
for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
{
var tr;
tr=’‘+data.data[i].name+’‘+’‘+data.data[i].startTime+’‘+’‘+data.data[i].is_true+’‘+’‘+data.data[i].device+’’
$(“#tabletest”).append(‘‘+tr+’‘)
}
}
})
})
注意* for in 通常用于对象
遍历数组的两种方法(each,foreach)：

 $.each(arr,function(index,item){})

 arr.forEach(function(item,index))

//  arr为数组 ,index索引，item为当前值

2>each方法

    $(function(){
         $.ajax({
        url:'data.json',
        type:'get',
        dataType:'json',
        success:function(data){
            $.each(data.data,function(index,item){
                var tr;
                tr='<td>'+item.name+'</td>'+'<td>'+item.startTime+'</td>'+'<td>'+item.is_true+'</td>'+'<td>'+item.device+'</td>';
                $("#tabletest").append('<tr>'+tr+'</tr>')
            })
        }

})})
总结：获取对象属性的方法：item.name或item[‘name’]
jquery添加节点方法：

      ul.append('<li>'+哈哈+'</li>')  

      append:在</ul>之前添加li

      prepend:在<ul>之后添加li

      before:在<ul>之前添加li

      after:在</ul>之后添加li

—–延伸—-

（1）将数据中is_true中的0转换为中文

采用三目运算或条件判断

item.is_true=parseInt(item.is_true)==0?’否’:’是’
//注意数据是string类型需转换，且三目运算符返回的是结果不能写成item.is_true==0? item.is_true=’否’: item.is_true=’是’
（2）将数据中device过滤只显示冒号以前的数据

item.is_true=parseInt(item.is_true)==0?’否’:’是’
var arr=item.device.split(“:”)
item.device=arr[0]
split()分隔符方法用于把一个字符串分割成字符串数组
4.data.json文件

{
“status”: 0,
“data”: [
{

        "name": "天王盖地虎",  
        "startTime": "2017-03-02 00:00",
        "is_true":"0",
        "device": "SM-C9000:samsung"
    },  
    {  

        "name": "宝塔镇河妖",  
        "startTime": "2017-03-02 00:00"  ,
         "is_true":"0",
         "device": "SM705:smartisan"
    },  
    {  

        "name": "锄禾日当午",  
        "startTime": "2017-03-02 00:00" ,
         "is_true":"0" ,
             "device": "EVA-AL00:HUAWEI"
     }
]

}
效果图