[JavaScript知识库] oracle apex ajax process + dy 校验

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> oracle apex ajax process + dy 校验 -> 正文阅读

[JavaScript知识库]oracle apex ajax process + dy 校验

目前apex的后端校验，即用户输入后，点击提交才触发与后端服务器的校验，为了提升用户体验，可以把这一步前置，用js事件触发后端校验，以监测用户名是否重复为例。
演示环境为 apex 20.2

建立Ajax process

DECLARE
   l_count NUMBER := 0;
BEGIN
   --名称重复校验
   IF :P5_1 IS NOT NULL THEN
      SELECT COUNT(1)
        INTO l_count
        FROM 666 v
       WHERE v.1 = :P5_1
             AND ROWNUM = 1;
      IF l_count > 0  THEN
         htp.p('客户:' || :P5_1 || '已存在');
      ELSE
         htp.p('success');
      END IF;
   END IF;

   --号重复校验
   IF :P5_2 IS NOT NULL THEN
      SELECT COUNT(1)
        INTO l_count
        FROM 666 v
       WHERE v.2 = :P5_2
             AND ROWNUM = 1;
      IF l_count > 0  THEN
         htp.p('已存号为:' || :P5_2|| '的客户!');
      ELSE
         htp.p('success');
      END IF;
   END IF;

END;

先在process直接建立proce，然后位置选择 ajax,注意pl/sql要有返回值，后面的js需要根据返回值进行判断。
注意：htp.p打印的后面会有一个空格或者制表符，js判断时需要考虑进行字符串去空格操作。或者这个地方直接打印json也可以

在对应的表单页项上建立动态操作

js事件选择改变（onchange）或者失去焦点（onblur），真操作为执行js代码

apex.server.process('ajax_validate_customer_repeat',//这儿的名称为process的名称
    {
        pageItems: '#P5_PARTY_NAME'//注意带#号
    }
    ,
    {
        dataType: 'text', success: function (data) {
            
            if (  /*data*/ data.trim() != 'success') {//用htp.p打印的后面带一个空格，不知道为啥，此处要注意，也可以用apex封装的api直接打印json
                apex.message.clearErrors();
                apex.message.showErrors([
                    {
                        type: "error",
                        location: ["page", "inline"],
                        pageItem: "P5_PARTY_NAME",
                        message: data,
                        unsafe: false
                    }/*,
                    {
                        type: "error",
                        location: "page",
                        message: data,
                        unsafe: false
                    }*/
                ]);
            }
            else 
            {
                apex.message.clearErrors();
            }
        }
    }
)

效果如下

后续改进

可以把重复校验的单独封装成一个js函数

function repeat_validate(page_item_name) {
   apex.server.process('ajax_validate_customer_repeat',
      {
         pageItems: "#" + page_item_name
      }
      ,
      {
         dataType: 'text', success: function (data) {

            if (  /*data*/ data.trim() != 'success') {
               apex.message.clearErrors();
               apex.message.showErrors([
                  {
                     type: "error",
                     location: ["page", "inline"],
                     pageItem: page_item_name,
                     message: data,
                     unsafe: false
                  }
               ]);
            }
            else {
               apex.message.clearErrors();
            }
         }
      }
   )
}