javascript - ColdFusion 11：如何在不重新加载页面的情况下检查是否在 Struct 对象中找到表单字段值？

Question

场景：我有一个带有促销代码字段的注册表单。我需要在不重新加载页面的情况下检查用户输入的促销代码是否有效。

促销代码都保存在这样的结构中（不是实际值，而是相同的格式）：

<cfset sysPromoCode = structNew()>
<cfset tmp = StructInsert(sysPromoCode,"PC1","1.00")>
<cfset tmp = StructInsert(sysPromoCode,"PC5","5.00")>
<cfset tmp = StructInsert(sysPromoCode,"PC10","10.00")>
<cfset tmp = StructInsert(sysPromoCode,"PC15","15.00")>
<cfset tmp = StructInsert(sysPromoCode,"PC20","20.00")>
<cfset REQUEST.PromoCodeStruct = sysPromoCode>

在我的组件文件（'cmp-settings.cfc'）中，我创建了这个函数：

<cffunction name="ValidatePromoCode" access="remote" returnformat="json" output="false">
    <cfargument name="PromoCode" type="string" required="true">
    <cfif StructKeyExists(REQUEST.PromoCodeStruct, arguments.PromoCode)>
        <cfset isvalidPromoCode = true>
    <cfelse>
        <cfset isvalidPromoCode = false>
    </cfif>
    <cfreturn isvalidPromoCode />
</cffunction>

我正在使用的表格部分：

<label for="fPromo">Promo Code</label>

<input type="text" class="form-control" id="id_PromoCode" name="PromoCode" maxlength="10"> 
<a href="javascript:void();" onclick="applyPromo();" class="btn btn-success btn-sm">Apply</a>
                                
<div id="pInvalid" style="display:none;color:##ff0000;font-weight:bold;">Invalid code!</div>
<div id="pValid" style="display:none;color:##66cc00;font-weight:bold;">You've entered a valid code!</div>

'applyPromo()' 是一个基本的 javascript 函数，它在 pInvalid 和 pValid 字段上运行显示/隐藏过程。那是我要替换的脚本，因为它当前在页面源中公开了促销代码列表。我希望它必须用 AJAX 调用替换，但我对 JQuery 和 AJAX 真的不够熟悉，无法自己找到解决方案。

StackOverflow 的新手将不胜感激任何建议和帮助。

标签： javascriptjqueryajaxcoldfusion

Answer 1

当您 时onclick="applyPromo();"，此函数需要向服务器发出 Ajax 请求以验证促销代码，返回折扣金额并在 UI 中应用。

当您提交表单时，您需要在服务器端重新验证折扣码。确保调整后的总数也在服务器上计算。不要相信表单不只是将客户端代码所说的内容作为调整后的总数。

sysPromoCode您拥有定义代码并且仅在服务器上执行时存在的 ColdFusion 变量。快速而肮脏的方法是创建一个PromoCodeService.cfc：

<cfcomponent>

    <cffunction name="init" access="public" output="false" returntype="any">
        <cfset variables.PromoCodeStruct = {
            "PC1" : 1,
            "PC5" : 5,
            "PC10" : 10,
            "PC15" : 15,
            "PC20" : 20
        } >
        <cfreturn this>
    </cffunction>

    <cffunction name="getDiscountCodes" access="public" output="" returntype="struct"
        hint="I return all available discount codes.">
        <cfreturn variables.PromoCodeStruct>
    </cffunction>

    <cffunction name="getDiscountByCode" access="public" output="false" returntype="numeric"
        hint="I return a valid discount or -1 for invalid codes.">
        <cfargument name="dicsount_code" type="string" required="true">
        <cfif structKeyExists( variables.PromoCodeStruct, arguments.dicsount_code )>
            <cfreturn variables.PromoCodeStruct[arguments.dicsount_code]>
        <cfelse>
            <cfreturn -1>
        </cfif>
    </cffunction>

</cfcomponent>

您的 Ajax 调用将针对一些 URL，例如/api/check_promo_code.cfm：

<cfcontent type="application/json">
<cfif structKeyExists(form, "PromoCode")>
<cfset oPromoCodeService = new path.to.PromoCodeService()>
<cfoutput>#oPromoCodeService.getDiscountByCode(form.PromoCode)#</cfoutput>
<cfelse>
-1
</cfif>

此代码验证代码是否通过 HTTP POST 提交，然后检查结构中是否存在匹配键并返回折扣金额。如果没有匹配，则该函数getDiscountByCode()返回 -1。如果缺少所需的数据，请求仍然返回-1。

然后，您的 Ajax 调用可以在 UI 中应用折扣金额或显示代码无效 (-1)。

然后，您可以<cfset REQUEST.PromoCodeStruct = sysPromoCode>像这样替换现有的定义：

<cfset oPromoCodeService = new path.to.PromoCodeService()>
<cfset REQUEST.PromoCodeStruct = oPromoCodeService.getDiscountCodes()>

因此，您可以REQUEST.PromoCodeStruct在此之后继续按原样使用。

如果需要，这还可以为您提供将折扣代码移动到数据库的路径。您只需使用查询更新这些功能，就可以开始了。

最后一点：

他拒绝被指控修复引擎盖下的大部分混乱所需要的时间

您要么根据需要支付修复混乱的费用，要么忍受混乱产生的更大成本。