ajax请求拼接html代码

最新推荐文章于 2021-08-06 12:22:58 发布

原创最新推荐文章于 2021-08-06 12:22:58 发布 · 5.6k 阅读

CC 4.0 BY-SA版权

本文主要介绍了在使用Ajax进行数据请求时，如何处理返回的Json数据，并将其正确地插入到HTML页面中。通常，当dataType省略时，默认返回Json。通过`$("#dt_span").html(数据)`可以将数据填充到指定ID的元素内。对于图片src的设置，可以使用`attr`方法，如`$("#dtfz_img").attr("src", data.list[i].image)`。同样，对于href的设置，例如`$("#dt_a").attr("href", "/article/" + data.list[i].articleId).html(data.list[i].title)`。当需要循环处理数据时，可以先清空容器元素，然后根据HTML结构动态拼接HTML代码。" 51496641,4989971,Objective-C常用类名详解,"['ios', 'Objective-C', 'NS类库', 'UI组件']

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

最近用ajax用的比较多，所以来总结一下根据需要来处理ajax返回的内容

一般写ajax请求不规范的写法会把dataType去掉，默认的返回数据是Json，后台接口上加上@ResponseBody；

然后，请求成功后如何把数据放到对应的元素里面：$("#dt_span").html(数据)这个html页面的id=dt_span的标签都会显示数据

，图片的src是这样使用的$("#dtfz_img").attr("src",data.list[i].image);要用到attr；关于href是这样使用的：$("#dt_a").attr("href","/article/"+data.list[i].articleId).html(data.list[i].title);其实和图片一样。这个很简单，但是有时候我门需要循环，这样再写就不方便；所以这个时候就是需要html代码拼接

<div class="center-dt">
    <ul class="center-dt-right">
        <li><a href=""></a></li>
    </ul>
</dt>

 success: function (res) {
               var data = res;
               $(".center-dt-right").empty();
               if (data){
                   var html ="";
                   for (var i=0;i<data.list.length;i++){
                       html+='<li class="center-dt-right-li">';
                       html+='<a href="/article/'+data.list[i].articleId+'">'+data.list[i].title+'</a>';
                       html+='</li>';
                   }
                   $(".center-dt-right").html(html);
               } else {
               }
           }

在ajax请求成功回掉的函数里面，初始化默认要循环的内容的外面的容器是空的，也就是这里的ul是empty，然后，根据页面上代码结构，把数据带进来就可以了。