Coldfusion中的复选框更改时如何更新数据库？

Posted 2023-05-09

【中文标题】Coldfusion中的复选框更改时如何更新数据库？

【英文标题】：How to update database when checkbox in Coldfusion changes?

【发布时间】：2018-12-23 10:56:21

【问题描述】：

所以我创建了一个表，其中一列是一个名为“Arrived”的复选框，这意味着如果客户到达，我将选中该复选框，它将用当前时间更新我的数据库（mysql）。 我知道我必须使用 jquery 向 Coldfusion 发出 Ajax 请求并更新数据库，但我不知道该怎么做。 有人可以给我一个如何做到这一点的小例子吗？ 谢谢， 汞

更新

所以我一直在我的项目上做一些事情，我发现了一个问题。

这是我的 javascript 代码：

$(document).ready(function() 
           $(".predicted").on("change",function(event)
                var hora = this.value;
                console.log("Updating time = "+ hora);
                var id = jQuery('input[type=hidden][name=id]').val();;
                console.log(id);
                $.ajax(
                        url: "horaPrevista-update-database.cfc"
                        , type: "POST"
                        , dataType: "json"
                        , data: "method" : "updatePredicted", "returnFormat": "json", "hora": hora, "id": id
                    ).done(function(response) 
                        console.log("response", response);
                    ).fail(function(jqXHR, textStatus, errorMessage) 
                       console.log("errorMessage",errorMessage);
                    );
               window.location.reload(true);
          );
        );

这是我的 hC-update-database.cfm：

<cfcomponent>   
<cfset variables.dsn = "listareservas">

<cffunction name="updatePredicted" returntype="struct" access="remote">
   <cfargument name="hora" type="string" required="true">
   <cfargument name="id" type="numeric" required="true">

   <cfset local.response = success=true>

   <cftry>
       <cfquery datasource="#variables.dsn#">
           UPDATE Reservas
           SET    ReservaTempoPrevisto = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#arguments.hora#"> 
           WHERE  ReservaID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">
       </cfquery>
       <cfcatch>    
           <!--- add handling here... --->
           <cfset local.response = success=false>
       </cfcatch>
   </cftry>

   <cfreturn local.response>
</cffunction>

我有一个由查询填充的表。

<cfoutput query="getReservations">
     <tbody>
          <tr>
              <td><input class="form-control predicted" name="predicted" id="ReservaHoraPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#">
                  <input type="hidden" name="id" class="id" value="#ReservaID#"></td>
          </tr>
      </tbody>

例如，如果我的查询 getReservations 有 10 条记录，它将显示 10 个输入。问题是如果我尝试更改输入，它总是会在数据库中更新表中显示的第一条记录（它总是将第一条记录值#ReservaID# 发送到 hC-update-database.cfm）。如何将 2 个值发送到 cfc（输入和 id）？

【问题讨论】：

能否请您发布到目前为止您尝试过的内容？如果您是 S.O. 的新手，它的工作方式与论坛不同：) 通常，问题包含您尝试过的代码、结果和任何错误消息。有关提问的一些提示，以及避免这个问题被closed，请参阅***.com/help/how-to-ask 和***.com/help/mcve

【参考方案1】：

无论我选中哪个复选框，它总是会在数据库中更新表中显示的第一条记录

这是因为演示示例的设计考虑了一条记录。如果你的表单实际处理多条记录，则需要修改 JS 和 CF 代码。

由于您只是将 ID 传递给 CF，因此不需要单独的隐藏字段。只需使用“ReservaID”作为复选框值。当复选框状态更改时，使用“更改”事件更新记录。下面的示例在选中一个框时更新记录。请记住，用户可以取消选中一个框 - 或重新选中它。您需要决定如何在数据库端处理这些事件并相应地修改代码。前任。未选中时是否要清除到达日期？如果重新检查，使用当前日期和时间更新记录等...？

注意，我的偏好是使用 CFC 进行 ajax 调用。 JS代码类似，只是URL和数据参数不同

<!--- manual query for DEMO --->
<cfset getReservations = queryNew("ReservaID","integer",[[1],[2],[3],[4]])>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() 
   $(".arrived").on("change",function(event)
        if (this.checked) 
            var reservaID = this.value;
            console.log("Updating id = "+ reservaID);
            $.ajax(
                url: "SomeComponent.cfc"
                , type: "POST"
                , dataType: "json"
                , data: "method" : "updateArrival", "returnFormat": "json", "id": reservaID
            ).done(function(response) 
                console.log("response", response);
            ).fail(function(jqXHR, textStatus, errorMessage) 
               console.log("errorMessage",errorMessage);
            );
        
  );
);
</script>


<form>
    <cfoutput query="getReservations">
        <input type="checkbox" class="arrived" name="arrived" value="#ReservaID#" />
    </cfoutput>
</form>

在 CF 端，创建一个接受单个数字 ID 的远程函数。

<cfcomponent>   
    <cfset variables.dsn = "listareservas">

    <cffunction name="updateArrival" returntype="struct" access="remote">
       <cfargument name="id" type="numeric" required="true">

       <cfset local.response = success=true>

       <cftry>
           <cfquery datasource="#variables.dsn#">
               UPDATE Reservas
               SET    ReservaHoraChegada = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#"> 
               WHERE  ReservaID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">
           </cfquery>
           <cfcatch>    
               <!--- add handling here... --->
               <cfset local.response = success=false>
           </cfcatch>
       </cftry>

       <cfreturn local.response>
    </cffunction>
</cfcomponent>

【讨论】：

是否可以在没有更新按钮的情况下做到这一点？我有两个原因：一个是因为我不想点击一个按钮来更新数据库。我想选中复选框并自动更新数据库。其次，这将更新之前可能已更新的记录的到达时间（假设我选择一条记录，然后单击更新，然后在我想更新另一条记录之后的一段时间，这将影响我之前更新的记录，我不想那样）。

是的，请参阅我的更新答案。请记住，用户可以取消选中一个框 - 或重新选中它。您需要决定如何在数据库端处理这些事件并相应地修改代码。

完美运行！关于用户取消选中或重新选中一个框的情况，我将不得不考虑我想用它做什么。不过非常感谢您的帮助！

另一个问题：如果我有一个输入字段而不是复选框，我期待一个时间 (HH:mm)。该输入类型的值将是用户选择的时间。那么我如何将 id 发送到 JS 并因此发送到 cfc？

文本框有不同的事件。挂钩 onBlur 事件可能会起作用。不过，这是一个不同的问题，所以最好打开一个新线程。

【参考方案2】：

试试这样的：

表单模板：

form-template.cfm

<cfparam name="url.clientid" default="0">

<cfoutput>

  <!DOCTYPE html>
  <html>
    <head>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

      <script type="text/javascript">

        jQuery(document).ready(function() 

          jQuery("input[type=checkbox][name=arrived]").on('click',function(event)
            var currentObj = jQuery(event.currentTarget);
            if(currentObj.prop("checked") === true)
              var ajaxurl = "ajax-update-database.cfm?clientid=" + jQuery('input[type=hidden][name=clientid]').val();
              jQuery.ajax(
                url:ajaxurl
              )
              .done(function(response) 
                var obj = JSON.parse(response);
                console.log("obj",obj);
              )
              .fail(function(jqXHR, textStatus, errorMessage) 
                console.log("errorMessage",errorMessage);
              );
            
          );

        );

      </script>

    </head>

    <body>

      <form>
        <label for="arrived">Arrived</label><br />
        <input type="checkbox" name="arrived">
        <input type="hidden" name="clientid" value="#url.clientid#">
      </form>

    </body>
  </html>

</cfoutput>

Ajax 模板：

ajax-update-database.cfm

<cfparam name="url.clientid" default="0">
<cfparam name="variables.response" default="#StructNew()#">

<cfset variables.response['error'] = "">

<cfif Val(url.clientid)>

  <cftry>
    <cfquery datasource="yourDSN">
      UPDATE yourDBTable
      SET Arrived = <cfqueryparam cfsqltype="cf_sql_tinyint" value="1">, Submission_date = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#Now()#"> 
      WHERE ClientID = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.clientid#">
    </cfquery>
    <cfcatch>
      <cfset variables.response['error'] = "An error occurred whilst trying to update the database">
    </cfcatch>
  </cftry>

</cfif>

<cfoutput>
#SerializeJSON(variables.response)#
</cfoutput>

【讨论】：

@Hugo Gaspar 希望对 Hugo 有所帮助？

为了让其他人更容易理解，您能否举例说明随附的<form> 的外观？虽然对 .cfm 脚本进行 ajax 调用是有效的，但它比调用 CFC 更容易使那些学习 ajax 调用的人感到困惑。考虑改用 CFC。使用returnFormat=json 调用它来自动序列化对象，使用dataType: 'json' 来自动反序列化响应。旁注，对所有变量进行限定范围是一种很好的做法。

@Ageax RE: ajax to cfc: 我想这是你的意见。我发现向模板发出 ajax 请求更容易理解，尤其是对于初学者。我同意我的变量应该有范围。好决定。我现在将更新并添加表单部分，尽管我从问题中假设，OP 已经涵盖了这部分。

“虽然我从问题中假设，OP 已经涵盖了这部分。”可能是，尽管我也在考虑其他人将来会阅读这个帖子。当你学习新东西时，清晰完整的例子就像金子一样:)

感谢您的帮助！我正在努力，一旦完成或有任何问题，我会在这里发布！