JSP 循环ajax 返回的集合

纯笔记:  抽时间优化样式哈

JSP 循环ajax 返回的集合:

要在JSP中使用循环展示Ajax返回的集合,你可以使用JSP的内置循环机制,如<c:forEach>标签。以下是一个示例:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
    <title>Ajax Example</title>  
</head>  
<body>  
    <div id="dataDiv"></div>  
  
    <script>  
        function loadData() {  
            $.ajax({  
                url: '/get-data', // 请求路径  
                type: 'GET', // 请求类型  
                success: function(data) {  
                    // 使用jQuery的.html()方法更新div元素的内容(可选)  
                    $('#dataDiv').html('');  
                    $.each(data, function(index, item) {  
                        var listItem = '<p>' + item.property1 + ' - ' + item.property2 + '</p>';  
                        $('#dataDiv').append(listItem);  
                    });  
                },  
                error: function(error) {  
                    console.log('Error:', error); // 在控制台打印错误信息(可选)  
                }  
            });  
        }  
        loadData(); // 调用函数加载数据  
    </script>  
</body>  
</html>

在上面的示例中,我们使用了<c:forEach>标签来循环遍历返回的集合。在JavaScript中,我们使用$.each()方法来遍历返回的集合,并将每个数据项添加到<div>标签中。注意,这里假设返回的数据是一个包含对象的数组,每个对象具有属性property1property2。你可以根据实际情况修改代码以适应不同的数据结构和显示需求。

如果需要内部使用ajax的数据作为值进行渲染: 如下

如果你想在JSP页面中直接循环展示Ajax返回的集合数据,你可以使用JSP的内置循环机制来实现。

假设你的Ajax请求返回一个包含对象的数组,每个对象具有属性property1property2,你可以使用以下代码将集合数据直接放在页面中循环展示:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
    <title>Ajax Example</title>  
</head>  
<body>  
    <div id="dataDiv">  
        <c:forEach items="${ajaxData}" var="item">  
            <p>${item.property1} - ${item.property2}</p>  
        </c:forEach>  
    </div>  
  
    <script>  
        function loadData() {  
            $.ajax({  
                url: '/get-data', // 请求路径  
                type: 'GET', // 请求类型  
                success: function(data) {  
                    // 将返回的数据赋值给request属性(这里假设数据是存储在request中的)  
                    request.setAttribute("ajaxData", data);  
                },  
                error: function(error) {  
                    console.log('Error:', error); // 在控制台打印错误信息(可选)  
                }  
            });  
        }  
        loadData(); // 调用函数加载数据  
    </script>  
</body>  
</html>

在上面的示例中,我们使用了JSP的<c:forEach>标签来循环遍历ajaxData集合。在JavaScript中,我们将返回的数据赋值给request对象的ajaxData属性。然后,在JSP页面中,我们使用EL表达式(${})来引用ajaxData集合,并将其作为<c:forEach>标签的items属性。在循环体内,我们使用EL表达式引用每个对象的属性并进行展示。

eq: 那这个request 是在那里定义的?

在JSP中,request是一个预定义的对象,用于处理HTTP请求。它属于Java Servlet API中的HttpServletRequest类型。当客户端发送HTTP请求到服务器时,服务器使用request对象来获取请求的信息,包括请求参数、请求头信息、客户端信息等。request对象是JSP页面与HTTP请求交互的桥梁。

在JSP页面中,你可以使用request对象来获取客户端提交的数据、查询参数、请求头信息等。例如,你可以使用request.getParameter()方法获取表单提交的数据,或者使用request.getParameterNames()方法获取所有的请求参数名。

请注意,request对象是在JSP页面被服务器处理时自动创建的,你不需要手动定义它。在JSP页面中,你可以直接使用request对象来访问HTTP请求的信息。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值