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

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

jquery mysql ajax database coldfusion

Jquery 当Coldfusion中的复选框更改时，如何更新数据库？,jquery,mysql,ajax,database,coldfusion,Jquery,Mysql,Ajax,Database,Coldfusion,因此，我创建了一个表，其中一列是一个名为“到达”的复选框，这意味着如果客户机到达，我将选中该复选框，它将用当前时间更新我的数据库（MySql）。我知道我必须使用jquery向Coldfusion发出Ajax请求并更新数据库，但我不知道如何做到这一点。有人能给我举个小例子说明如何做到这一点吗？非常感谢。汞更新所以我一直在做我的项目，我发现了一个问题这是我的javascript代码： $(document).ready(function() { $(".predi

因此，我创建了一个表，其中一列是一个名为“到达”的复选框，这意味着如果客户机到达，我将选中该复选框，它将用当前时间更新我的数据库（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>


更新预订
将ReservaTempoPrevisto设置为=
其中ReservaID=

我有一个由查询填充的表

<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）。如何将这两个值发送到cfc（输入和id）？

尝试以下方法：

表单模板：

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>


jQuery（文档）.ready（函数（）{
jQuery（“输入[type=checkbox][name=arrized]”。在（'click'）上，函数（事件）{
var currentObj=jQuery（event.currentTarget）；
如果（currentObj.prop（“选中”）==真）{
var ajaxurl=“ajax update database.cfm？clientid=“+jQuery（'input[type=hidden][name=clientid]”）。val（）；
jQuery.ajax({
url:ajaxurl
})
.完成（功能（响应）{
var obj=JSON.parse（响应）；
控制台日志（“obj”，obj）；
})
.fail（函数（jqXHR、textStatus、errorMessage）{
日志（“errorMessage”，errorMessage）；
});
}
});
});
到达

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>


更新您的数据库表
设置到达日期=，提交日期=
其中ClientID=
#序列化JSON（variables.response）#

尝试以下方法：

表单模板：

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>


jQuery（文档）.ready（函数（）{
jQuery（“输入[type=checkbox][name=arrized]”。在（'click'）上，函数（事件）{
var currentObj=jQuery（event.currentTarget）；
如果（currentObj.prop（“选中”）==真）{
var ajaxurl=“ajax update database.cfm？clientid=“+jQuery（'input[type=hidden][name=clientid]”）。val（）；
jQuery.ajax({
url:ajaxurl
})
.完成（功能（响应）{
var obj=JSON.parse（响应）；
控制台日志（“obj”，obj）；
})
.fail（函数（jqXHR、textStatus、errorMessage）{
日志（“errorMessage”，errorMessage）；
});
}
});
});
到达

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>


更新您的数据库表
设置到达日期=，提交日期=
其中ClientID=
#序列化JSON（variables.response）#

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

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

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

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


$（文档）.ready（函数（）{
美元（“.arrized”）。在（“变更”，功能（事件）{
如果（选中此项）{
var reservaID=this.value；
console.log（“更新id=“+reservaID”）；
$.ajax({
url:“SomeComponent.cfc”
，类型：“POST”
，数据类型：“json”
，数据：{“方法”：“UpdaterRival”，“返回格式”：“json”，“id”：reservaID}
}).完成（功能（响应）{
控制台日志（“响应”，响应）；
}).fail（函数（jqXHR、textStatus、errorMessage）{
日志（“errorMessage”，errorMessage）；
});
}
});
});

在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>


更新保留
设置ReservaHoraChegada=
其中ReservaID=

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

这是因为演示示例是设计的