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

《!-- 主要讲以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>

你可能感兴趣的:(JavaScript,jsonp,jquery,Ajax,REST)