js动态从服务器把请求的数据插入到页面相应的位置

最新推荐文章于 2022-12-28 12:51:10 发布

iteye_5076

最新推荐文章于 2022-12-28 12:51:10 发布

阅读量310

点赞数

分类专栏： js 文章标签： jQuery jsonp Ajax REST JavaScript ViewUI

js 专栏收录该内容

14 篇文章

订阅专栏

《!-- 主要讲以class属性为“attention”开头，后面跟的的相应的活动的Id，同去取得以此class属性开头的ids的字符串，传到服务器上，并返回应得的数据，并插入到此元素中-->

<div id="test" class="test" style="border:1px solid red;width:200px;height:200px">
            <span class="attention1 aa" name="a"></span>
            <span class="attention2" name="a"></span>
            <span class="attention3" name="a"></span>
            <span class="attention4" name="a"></span>
        </div>
        <span class="attention1" name="attention"></span>
        <script type="text/javascript">
            //<![CDATA[
                var elems = $("span[class^='attention']",$("#test"));   //在以id=test的元素中查找span元素

                                                                                                    //中 class属性以attention开头的元素；
                function getIds(elems){
                    var ids = [];
                    elems.each(function(index,elem){
                        var value = $(elem).attr("class"); //得到class属性的值
                            var clzs = value.split(" ");
                            $.each(clzs,function(index,clazz){
                                if(clazz.indexOf("attention") == 0){ //确定是否已attention开头
                                    //ids[clazz.slice(9)] = elem;
                                    ids.push(clazz.slice(9));         //取出“attention”后面的字符串
                                }
                            })
                    });
                    return ids;                 //返回所有的字符串
                }
             var url ="http://192.168.2.104/group2-rest-web/event/attention/{eventId}";   //服务器请求的url
                url = url.replace("{eventId}",getIds(elems).join(","));
                jQuery.get(url,{},function(data){                                              //jquery发出ajax请求并返回data
                    $.each(data.attentions,function(index,att){
                        $(".attention"+att.id,$("#test")).text(att.count);   //插入相应的class中的内容
                    })
                },"jsonp")


            //]]>
        </script>