`
weina
  • 浏览: 144627 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • 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动态添加表格数据行

    ASP的代码部分没有在这篇文章中给出,但通常会涉及到解析`POST`请求中的数据,然后执行相应的SQL插入语句。 总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到...

    H5移动端上滑加载,带ajax异步请求后台数据,拿来即用

    4. 处理响应数据:收到服务器响应后,解析JSON格式的数据,然后动态创建新的DOM元素,将新内容插入到页面适当位置。 5. 更新UI:确保新内容正确显示,并可能调整滚动位置,让用户看到新增的内容。 四、优化策略 1....

    websocket实现前端页面动态刷新数据库中数据

    在“websocket实现前端页面动态刷新数据库中数据”的项目中,我们看到技术栈包括WebSocket、MySQL、Java 8和Tomcat 8。下面是这些技术如何协同工作来实现目标的详细解释: 1. **WebSocket**:WebSocket API是HTML5...

    页面滚动到底部自动加载数据

    通常会发送一个Ajax请求,请求更多的数据,然后动态地将新内容插入到页面的适当位置。 ### 4. Ajax请求 Ajax(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容...

    js页面插入html表格

    例如,如果需要从服务器获取实时数据,你可以使用Ajax请求,然后更新`content`并重新插入表格。 此外,如果你需要处理更复杂的数据结构,比如动态生成表格行或列,可以使用循环结构来遍历数据数组,为每一项生成...

    用ajax实现HTML 功能,从而达到动态从数据库中得到数据,而不要去修改jsp页面。代码:

    6. **动态更新HTML**:收到服务器响应后,我们可以通过DOM操作(如`document.getElementById().innerHTML`)将数据插入到HTML页面的相应位置,实现页面的动态更新。 在给定的文件中,`SelectPane.js`可能是用于处理...

    Ajax动态表格,可适时添加行、删除行、复制行

    它通过JavaScript发送异步HTTP请求到服务器,获取或提交数据,然后使用JavaScript处理这些数据,更新DOM(文档对象模型)以改变页面内容。在这个动态表格的例子中,我们可以使用Ajax来处理表格行的增删复操作,而...

    ajax异步请求数据分页

    将数据动态插入到页面相应的位置。 ```javascript var jsonData = JSON.parse(response); // 更新数据列表 $('#dataList').html(jsonData.data); // 更新分页导航 updatePagination(jsonData.totalPages); `...

    js+ajax动态分页.rar

    请求成功后,JavaScript会解析返回的数据(通常是JSON格式),并动态插入到DOM树中,实现内容的更新。 具体实现步骤如下: 1. **事件监听**:首先,我们需要监听用户的行为,比如滚动事件或者点击分页按钮的事件。...

    jQuery实现动态增加行,发送Ajax请求返回HTML

    3. **Ajax发送请求**:在某些情况下,新增加的行可能需要从服务器获取数据填充。我们可以利用jQuery的`$.ajax()`方法向服务器发送请求。例如,当用户填写完新行的字段后,可以发送一个Ajax请求以获取对应的HTML内容...

    jQuery实现的纯HTML模板进行ajax数据绑定

    标题中的“jQuery实现的纯HTML模板进行ajax数据绑定”指的是使用jQuery库来处理HTML模板,并通过AJAX技术动态地从服务器获取JSON数据,然后将这些数据绑定到模板中,实现页面内容的动态更新,无需刷新整个页面。...

    动态生成div框并且同时加载数据

    在动态生成div框时,我们通常会利用JavaScript的DOM(文档对象模型)操作功能,通过创建新的DOM元素(如div)并将其插入到页面中。 动态生成div框的基本步骤如下: 1. 创建div元素:使用`document.createElement('...

    动态加载select标签下拉框数据

    服务器响应这些请求,返回所需数据,然后JavaScript将这些新数据添加到现有的下拉选项中。 实现动态加载通常包括以下几个步骤: 1. **创建HTML结构**:首先,我们需要一个基本的HTML `&lt;select&gt;` 标签,可能包含...

    Java+servlet+jsp页面ajax请求

    它通过JavaScript异步地向服务器发送请求,获取数据,然后更新页面的局部内容,提高了用户体验。 1. **Servlet**:Servlet是Java中用于处理HTTP请求的服务器端组件。在Java Web应用中,Servlet接收客户端(如浏览器...

    android客户端连接远程服务器传递数据

    在这个过程中,Android 客户端使用 HTML 设计界面,并使用 JavaScript 给页面插入数据。远程服务器上使用 Servlet 来处理客户端的请求,并返回 JSON 数据给客户端。 Android 客户端连接远程服务器传递数据的步骤: ...

    动态图片新闻-常用的js新闻新闻

    在实际应用中,这通常涉及到AJAX(Asynchronous JavaScript and XML)技术,通过异步请求从服务器获取数据,然后用JavaScript将这些数据插入到HTML元素中,展示最新的新闻图片。 实现这一功能的具体步骤可能包括...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    通常,这个数组会包含从服务器获取的预定义节点数据。在这个案例中,我们将通过 AJAX 请求动态填充数据。 当用户点击“添加分类”按钮时,我们需要监听该按钮的点击事件,执行以下步骤: 1. 获取当前选中的父节点...

    动态生成HTML页面

    动态生成HTML页面是一种常见的Web开发技术,它使得服务器可以根据用户请求、实时数据或者特定条件来构建和发送定制化的HTML文档。这种方法与静态HTML页面不同,静态页面的内容在服务器上创建后就固定不变,而动态...

    Ajax与页面动态请求基础

    JSONP是一种绕过同源策略的方式,通过动态插入`&lt;script&gt;`标签,由服务器返回包裹在函数调用中的JSON数据。 7. **jQuery与Ajax** jQuery库简化了Ajax操作,提供了$.ajax()、$.get()、$.post()等便捷方法。它们隐藏...

Global site tag (gtag.js) - Google Analytics