ajax循环输出数据通常用的2种方式

作者: geeooooz | 来源:发表于2018-11-06 15:52 被阅读12次

ajax循环输出数据通常用的2种方式
移动web--ajax详解.md
Sass的表达式和控制命令 @for 篇
Jquery_ajax
JSON APIs and Ajax
nodejs基础3-数据通信：fetch，ajax2.0和web
前端传值给后台的三种方法
CRC_16校验算法
PRINT
js跳出循环的方式

$.each 和 for循环

记得引入 jquery目录要对

1.html 页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="alert"></div>
        <ul class="list">
            
        </ul>
        <input type="button" id="btn" value="请求数据">
        <input type="button" id="clear" value="清除数据">
        <script type="text/javascript" src="../public/js/jquery-2.0.3.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $.ajax({
                        type:"get",
                        dataType:"json",
                        url:"data.json",
//                      data:{},
                        success:function(res){
                            $(".alert").html("请求成功")
                            
                            
                            var html='';
                            
                            
                            //第一次方式
//                          $.each(res,function(i,v){
//                              html+="<li data-id="+v.id+">"+v.name+"</li>"
//                          })
                            //第二次方式
                            for(var i=0;i<res.length;i++){
                                html+="<li data-id="+res[i].id+">"+res[i].name+"</li>"
                            }
                            
                            
                            $(".list").html(html)
                            
                        },
                        error:function(){
                            $(".alert").html("请求失败")
                        }
                    })
                })
                $("#clear").click(function(){
                    $(".list").html("")
                    $(".alert").html("")
                })
                
            })
        </script>
    </body>
</html>```