Oracle APEX页面项值无法传递至PL/SQL动态内容区域求助

问题根源 #

动态刷新PL/SQL动态内容区域时，APEX通过AJAX请求获取内容，期望返回符合规范的JSON格式响应。你的代码输出了完整的<html>、<head>、<body>标签，导致AJAX回调尝试解析这些HTML为JSON时失败，触发SyntaxError: JSON.parse: unexpected character错误。初始加载正常是因为首次渲染是完整页面输出，不受AJAX解析规则限制。

解决方案 #

1. 简化PL/SQL动态内容代码 #

移除完整的HTML文档结构，只保留轮播的核心DOM元素，同时避免在动态内容中重复加载Bootstrap、jQuery等资源（应该在页面级全局引用，防止重复加载引发冲突）。

修改后的PL/SQL代码：

declare
    is_first boolean := true;
begin
    sys.htp.p('<div id="simple_carousel" class="carousel slide" data-ride="carousel">');
    sys.htp.p('<div class="carousel-inner">');
    
    for a in (select car_image_id
        from car_images
        where car_id = :P23_SELECT) loop
        if is_first then
            sys.htp.p('<div class="carousel-item active">');
            is_first := false;
        else
            sys.htp.p('<div class="carousel-item">');
        end if;
        sys.htp.p('<img src="https://apex.oracle.com/pls/apex/appname/images/cars/' || apex_escape.url(a.car_image_id) || '" class="d-block w-100" alt="Image ' || apex_escape.html(a.car_image_id) || '">');
        sys.htp.p('</div>');
    end loop;
    
    sys.htp.p('</div>');
    sys.htp.p('<a class="carousel-control-prev" href="#simple_carousel" role="button" data-slide="prev">');
    sys.htp.p('<span class="carousel-control-prev-icon" aria-hidden="true"></span>');
    sys.htp.p('<span class="sr-only">Previous</span>');
    sys.htp.p('</a>');
    sys.htp.p('<a class="carousel-control-next" href="#simple_carousel" role="button" data-slide="next">');
    sys.htp.p('<span class="carousel-control-next-icon" aria-hidden="true"></span>');
    sys.htp.p('<span class="sr-only">Next</span>');
    sys.htp.p('</a>');
    sys.htp.p('</div>');
end;

注：用apex_escape.url()处理图片ID，避免URL特殊字符引发问题。

2. 调整动态动作配置 #

• 确保动态动作的"执行"步骤中，勾选"提交页面项"，并将P23_SELECT添加到提交项列表，保证AJAX请求时该值能正确传递到会话状态。
• 在刷新区域动作之后，添加"执行JavaScript代码"动作，重新初始化轮播（AJAX替换DOM后原绑定会失效）：

  $('#simple_carousel').carousel();
  

3. 全局引用资源 #

在页面的"CSS"属性中添加Bootstrap样式：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

在页面的"JavaScript"属性中添加脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

额外检查点 #

• 确认P23_SELECT项的"会话状态保护"设置为"Unrestricted"，避免AJAX请求时会话状态更新被拒绝。
• 用浏览器开发者工具"网络"标签查看AJAX响应，确认返回的是纯净的轮播HTML，而非完整页面结构。

内容的提问来源于stack exchange，提问作者Strahinja