javascript - 如何通过 Bjron Holines Store Locator 插件使用 javascript + 系统现有 ColdFusion 代码为多个域设置 cookie

Question

为了展示商店定位器，我使用了 Bjorn Holines 商店定位器插件。这个插件有一个 html 模板，它在所有商店的 map 之外创建一个列表，其中包含详细信息。我在这个模板中添加了一个按钮。目标是在单击此按钮时存储具有特定分支 ID 的 cookie。此 cookie 应在多个域(无子域)上设置。我创建了一个调用 cfc 的函数。此 cfc 调用一个已经存在的自定义标记，其中通过使用 img scr="..."设置 cookie。请注意，我对 ajax/json 没有任何经验或知识。我看到很多障碍； returnformat、returntypes、cfoutputs、img、cfsavecontent、调用自定义标记的返回值等。使用此代码，我得到了成功的结果 TRUE + javascript 警报，但显然没有存储 cookie。我如何使用这个已经存在的自定义标签来设置 cookie？有可能吗？

hmtl模板中的按钮+功能:

<button type="button" class="btn btn-sm" id="voorkeur" onClick="setCookie('{{branch}}','{{name}}')">Als voorkeur instellen</button>
<script>
    function setCookie(branch, name) {
        $.ajax({
            url: "siteparts/branch/setCookieMultipleDomains.cfc"
            , type: "POST"
            , dataType: "json"
            , data: {"method" : "setCookie", "returnFormat": "json", "branch": branch}
        }).done(function(response) {
            console.log("response", response);
            alert('Uw voorkeur voor ' + name + ' is opgeslagen.');
        }).fail(function(jqXHR, textStatus, errorMessage) {
            console.log("errorMessage",errorMessage);
        });
    }
</script>

cfc setCookieMultipleDomains.cfc:

<cfcomponent>   
    <cffunction name="setCookie" returntype="struct" access="remote">
       <cfargument name="branch" type="string" required="true">

       <cfset lresponse = {success=true}>

       <cftry>
          <CF_CU_cookieding action="setCookies" branch="#branch#" ret="qGetCookies"> --->
            <cfcatch>    
                <cfset lresponse = {success=false}>
            </cfcatch>
        </cftry>

       <cfreturn lresponse>
    </cffunction>
</cfcomponent>

自定义标签CF_CU_cookieeding.cfm:

<cfsetting enablecfoutputonly="yes">
<cfparam name="attributes.action" default="">
<cfparam name="attributes.branch" default="">
<cfparam name="attributes.ret" default="">

<cfif attributes.action eq "setCookies">    
    <cfsavecontent variable="thecontent">
        <cfoutput><img src="https://www.domain1.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain2.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain3.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
        <cfoutput><img src="https://www.domain4.com/scripts/ajax/save/setCookie.cfm<cfif attributes.branch neq "">?branch=#attributes.branch#</cfif>" width="1" height="1"></cfoutput>
    </cfsavecontent>
    <cfif attributes.ret neq "">
        <cfset setvariable("caller.#attributes.ret#", thecontent)>
    <cfelse>
        <cfoutput>#thecontent#</cfoutput>
    </cfif> 

<cfelseif attributes.action eq "createCookie">
    <cfcookie name="d_cookie_ok" value="1" expires="never"> 
    <cfif attributes.branch neq "">
        <cfcookie name="d_cookie_branch" value="#attributes.branch#" expires="never">   
    </cfif>

</cfif>

和 img scr setCookie.cfm :

<cfparam name="request.branch" default="">

<cfif request.branch neq "">
    <CF_CU_cookieding action="createCookie" branch="#request.branch#">
<cfelse>
    <CF_CU_cookieding action="createCookie">
</cfif>

Answer 1

使用自定义标签 cu_cookieding 的返回值 qGetCookies 修复。在我的 cfc 中，我将返回类型更改为“任何”。我从不必要的文本中删除了 qGetCookies，只有 img 的路径，逗号分隔。发回响应。在 html 模板的 javascript 中，我为 future 的 img 添加了一个 div。我根据 cfc 响应创建了一个数组。遍历数组以创建图像。现在为多个域设置了 cookie

CFC:

<cfcomponent>   
    <cffunction name="setCookie" returntype="any" access="remote">
        <cfargument name="branch" type="string" required="true">

        <cftry>
            <CF_CU_cookieding action="setCookies" branch="#branch#" ret="qGetCookies"> 
            <cfcatch>    
                <cfset lresponse = {success=false}>
            </cfcatch>
        </cftry>
        <cfset lresponse = replace(qGetCookies,'><','>,<','all')>
        <cfset lresponse = replace(lresponse, '<img src="','','all')>
        <cfset lresponse = replace(lresponse,'" width="1" height="1">','','all')>
        <cfreturn lresponse>
    </cffunction>
</cfcomponent> 

html 模板:

{{#location}}
<li data-markerid="{{markerid}}">
    <div class="list-label"><img src="{{marker}}" /></div>
    <div class="list-details">
        <div class="list-content">
            <div class="loc-name">{{name}}</div>
            <div class="loc-addr">{{address}}</div>
            {{#if address2}}
                <div class="loc-addr2">{{address2}}</div>
            {{/if}}
            <div class="loc-addr3">{{postal}} {{city}}</div>
            {{#if web}}
                <div class="loc-web"><a href="http://{{web}}" target="_blank">{{niceURL web}}</a></div>
            {{/if}}
            {{#if distance}}
                <div class="loc-dist loc-default-dist">{{distance}} {{length}}</div>
                {{#if altdistance}}<div class="loc-dist loc-alt-dist">{{altdistance}} {{altlength}}</div>
                {{/if}}
            {{/if}}
            <div class="loc-directions"><a href="https://maps.google.com/maps?saddr={{origin}}&amp;daddr={{address}} {{address2}} {{city}}, {{state}} {{postal}}" target="_blank">Route</a></div>
            <div id="cImgHolder"></div>
            <button type="button" class="btn btn-sm" id="voorkeur" onClick="setCookie('{{branch}}','{{name}}')">Als voorkeur instellen</button>
            <script>
                function setCookie(branch, name) {
                        $.ajax({
                            url: "decokay2015/siteparts/branch/setCookieMultipleDomains.cfc"
                            , type: "POST"
                            , dataType: "json"
                            , data: {"method" : "setCookie", "returnFormat": "json", "branch": branch}
                        }).done(function(response) {
                            console.log("response", response);
                            var cArr = response.split(',');
                            console.log("cArr", cArr);
                            for (var i = 0; i < cArr.length; i++) {
                                var elem = document.createElement("img");
                                elem.setAttribute("src", cArr[i]);
                                elem.setAttribute("height", "1");
                                elem.setAttribute("width", "1");
                                document.getElementById("cImgHolder").appendChild(elem);
                            }  
                            alert('Uw voorkeur voor ' + name + ' is opgeslagen.');
                        }).fail(function(jqXHR, textStatus, errorMessage) {
                           console.log("errorMessage",errorMessage);
                        });                 
                }
            </script>

        </div>
    </div>
</li>
{{/location}}