用ajax输出的html 的class标签如何绑定????

用ajax输出的html 的class标签如何绑定????,第1张

ajax一般是获得数据,然后用js *** 作DOM重新写入节点

写入节点的时候,可以给写入的元素添加class。然后样式会自动加载。

$.ajax({

    url : "test.action",

    dataType : "json",

    type : "GET",

    contentType : "application/json",// 注意请求页面的contentType

    beforeSend : function(XMLHttpRequest) {//加载前

    },

    success : function(data) {//数据返回成功,返回数据为data

        var html="<p>"+data.result+"</p>"

        $("body").append(html)

    },

    error : function() {

        alert("服务器故障,请稍后再试!")

    },

    complete : function() {//加载完成

    }

})

第一步:jsp页面中需要导入core jstl和function jstl 和下文提到的jq分页插件

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<link rel="stylesheet" type="text/css" href="/css/paging.css">

<script type="text/javascript" src="/js/jquery-1.11.2.js"></script>

<script type="text/javascript" src="/js/query.js"></script>

<script type="text/javascript" src="/js/paging.js"></script>1234567

第二步:head中写如下方法

<script type="text/javascript"> function change(page) {

<c:set var="totalPage" value="${fn:length(List)}" scope="session"/>

<c:set var="perPage" value="2" scope="session"/> var begin =${perPage}*(page - 1) var end =${perPage}*(page - 1) + ${perPage}-1 for (var i = 0i <(${totalPage})i++) {if (i >= begin &&i <= end) {

document.getElementById(i).style.display = "block"

} else {

document.getElementById(i).style.display = "none"

}

}

}

第三步:找到想被分页的list集合,也就是下面想被分页的jstl中foreach遍历的集合,并且在foreach标签中使用varStatus定义一个变量 i 将html元素的id设置为 这个变量 i

(我所给的示例代码中使用的是dl 同理 div,table都可以,根据自己需求进行修改)

function loadData(){

$.ajax({

type: "POST",

url: "",

dataType: "xml",

success: function(returnedData){

var html = ""

var tdHead = "<td>"

var tdFoot = "</span></div></td>"

$(returnedData).find('student').each(function(i){

var id = $(this).find('id').text()

var name = $(this).find('name').text()

var age = $(this).find('age').text()

html +=

tdHead + name + tdFoot +

tdHead + age + tdFoot + "</tr>"

})

$("#t2 tr:gt(0)").remove()//这一句清空上一次的请求数据

$("#t2").append(html)//往表单里面追加数据

}

})

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7923795.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存