【问题标题】:How to populate a Jquery array and DOM objects from CFC result如何从 CFC 结果填充 Jquery 数组和 DOM 对象
【发布时间】:2020-03-19 13:22:55
【问题描述】:

我有以下问题,希望这里的人能给我一个更合适的解决方案。首先,我试图从 ajax 中的 CFC 调用的结果中填充 12 个表单对象。我对返回的集合进行 if/else 并通过从 CFC 返回的描述填充每个 DOM 对象值,必须有一种更简单的方法来执行此操作。让我向您展示支持组件,然后是我认为可以做得更好的 ajax 调用;

getValue()用于jQueryUtils.js中调用SessionMgr.cfc获取会话变量值;

function getValue(a) {
    var result = undefined;

        $.ajax({
                url: "cfc/SessionMgr.cfc",
                async: false,
                type: "get",
                dataType: "text",
                data: {
                    method: "getValue",
                    variablename: a
                },
              success: function(response) {
                  result = response;
                  //console.log('getValue: ', a , ' value: ' , response);
              },
              error: function(jqXHR, status, error) {
                  console.log('Error Occurred');
                  console.log(error);
              }
          });
    return result;
 }

调用SessionMgr.cfc;

<cffunction name="getValue" access="remote" returntype="string" returnformat="plain" output="yes" hint="I get the value of the given user-specific variable.">
    <cfargument name="variablename" type="string" required="yes">
    <cfreturn session[arguments.variableName] />
</cffunction>

然后是下面的函数调用;

function getAllNodeValues() {

    var lID =        getValue('lID');
    var nID =        getValue('nID');
    var rLocation =  getValue('rLocation');
    var rMonth =     getValue('rMonth');
    var rYear =      getValue('rYear');
    var rStartDate = getValue('rStartDate');
    var rEndDate =   getValue('rEndDate');

        $.ajax({
            url: "cfc/Nodes.cfc",
            type: "get",
            async: false,
            dataType: "json",
            data: {
                Method: "GetAllNodeValues",
                LineID: lID,
                LineNodeID: nID,
                DCID: rLocation,
                Month: rMonth,
                Year: rYear,
                StartDate: rStartDate,
                EndDate: rEndDate
            },
          success: function(response) {
              $.each(response.DATA, function(i, row) {
                  // get value of first row as descriptions;
                  var val = row[0];
                  var descr = row[1];
                  // append new options
                  if(descr == 'IsActive') {
                      $('#cboNodeIsActive').val(val);
                  } else if(descr == 'OpCode') {
                      $('#cboNodeOpCode').val(val);
                  } else if(descr == 'IsUnits') {
                      $('#txtNodeIsUnits').val(val);
                  } else if(descr == 'Fractal') {
                      $('#cboNodeFractal').val(val);
                  } else if(descr == 'Ordinal') {
                      $('#txtNodeOrdinal').val(val);
                  } else if(descr == 'ParentID') {
                      $('#cboNodeParentID').val(val);
                  } else if(descr == 'Constant') {
                      $('#cboNodeConstant').val(val);
                  } else if(descr == 'ConstantValue') {
                      $('#txtNodeConstantValue').val(val);
                  } else if(descr == 'CurrentBalance') {
                      $('#txtNodeCurrentBalance').val(val);
                  } else if(descr == 'EndingBalance'){
                      $('#xtxNodeEndingBalance').val(val);
                  } else if(descr == 'CurrentUnits'){
                      $('#txtNodeCurrentUnits').val(val)
                  } else if(descr == 'EndingUnits'){
                      $('#txtNodeEndingUnits').val(val);
                  }
              });
          },
          error: function(msg) {
              console.log(msg);
          }
      });   
    }

返回这个数据集; 由于我的 DOM 对象的命名约定,这似乎是设置它们的唯一方法是在 $.each() 事件期间通过 if/else 结束。如果有人有更好的直接进入数组的方法,或者对这里的方法有任何改进,将不胜感激。

所以返回的 JSON 对象有 COLUMNS 和 DATA,我如何评估 if/else 中的 COLUMNS,然后获取与数组引用对应的 DATA 值?

所以,我在我的成功中添加了这个:回调;

 var i = 0;
              var col = [];
              var dat = [];
              col = response.COLUMNS;
              dat = response.DATA;
              console.log('col ', col);
              console.log('dat ',dat);

这是控制台结果,

我不明白为什么 DATA 嵌套了比 COLUMNS 更深的层,然后我如何将列名与数据中的值匹配成对,我可以评估一个并将我的 DOM 对象设置为另一个?

【问题讨论】:

  • 除此问题外,您还需要从 AJAX 请求中删除 async: false。这是非常糟糕的做法,浏览器会在控制台中向您显示有关它的警告,并且无论如何都不需要它。
  • 这里对我的问题的每个答案都非常明确地添加了 async: false,您能否详细说明为什么它的做法不好?
  • 主要原因是因为它在请求进行时挂起浏览器。如果您的服务器响应缓慢,这将向用户显示浏览器已崩溃,并且在某些情况下会导致操作系统终止浏览器进程。简而言之,在处理 AJAX 时始终使用异步模式,无论是使用回调还是 Promise。更多here
  • IIRC async : false 从 1.8 开始被 Promise 弃用,但仍可用于回调。也就是说,您通常不想要使用同步调用,因为它们会阻塞。

标签: javascript jquery ajax coldfusion cfc


【解决方案1】:

我不明白的是为什么 DATA 嵌套的层比 COLUMNS,然后如何将列名与中的值匹配 数据成对,我可以评估一个并将我的 DOM 对象设置为 其他的?

ColdFusion 中的 JSON 序列化与随附的 UI 小部件相关联。大多数开发人员已经放弃了这些 UI 标记,但问题在于将查询对象转换为更标准的 JSON 格式。 I created a CFC to handle that

serializeJSON( someQuery )

将以这种格式返回:

{
  "COLUMNS":["BOOKID","TITLE","GENRE"],
  "DATA":[
    [8,"Apparition Man","Fiction"],
    [2,"Shopping Mart Mania","Non-fiction"]
  ]
}

此 CFC 会将查询对象转换为数组数组或结构数组(JSON 对象):

{
  "data":[
    {"bookid":8,"genre":"Fiction","title":"Apparition Man"},
    {"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
  ]
}

默认情况下,CFC 将所有列名都小写。如果您愿意,您可以调整它以使列名保持在当前大小写。然后,您可以使用 jQuery 通过表单的 ID 选择表单中的所有字段,并将 JSON 键映射到字段 ID。我确信还有其他方法可以完成该任务,而无需手动将数据一次映射到字段。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2011-01-24
  • 2019-08-04
  • 1970-01-01
  • 2021-12-19
  • 2012-04-17
  • 1970-01-01
  • 1970-01-01
  • 2020-07-26
相关资源
最近更新 更多