如何将 ajax 数组放入 coldfusion 变量？

Question

我正在处理一个问题，需要一些帮助。我正在研究 HTML 填充特殊机器标签的代码。这是一种网页，人们可以在其中填写行数和文本大小，然后输入他们希望结果 table 包含在每一行中的行的文本。

我需要有关如何将 ajax 数组放入 coldfusion 变量的建议。

这是我从字段中按顺序检索文本的问题的一个小示例：

for(let a = 1; a <= g_rowCounter; a++){
   text = getVal('i_row-input_' + a);
   g_texts.push(text);
   reqData += "label_"+a+"="+text+"&";
   dataForAjax["label_" + a] = text;
}

这里我想把ajax数组放在一个coldfusion变量中：

<cfoutput>#label_1#</cfoutput>

我需要将那些 ajax 数组放入 coldfusion 变量，然后将它们列在程序的底部。你可以在这张照片中看到它。

有没有人遇到类似的问题或者知道如何解决？

谢谢大家的回答。

这里是参考整个代码锁定问题。

<html>
    <head>
        <meta charset="UTF-8">
        <title>Stitek</title>
        <script
            src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
        <style>
            div.c_row-inputs_wrp{
                display: flex;
                flex-direction: column;
            }
            
            input.c_form-input, button.c_form-button, input.c_row-input {
                margin: 4px;
                margin-left: 0px;
            }
            
            button.c_form-button {
                width: 130px;
            }
            
            input.c_form-input, input.c_row-input {
                width: 250px;
            }

            
            
            
            /* styly pro hlavni ramecek (wrapper) */
            div.c_vystup_wrp {
                display: inline-block;
                padding: 0 5mm;
                

                /*odtud se muze menit*/
                border: 1px solid white;
                background-color: black;
                
            }
            
            /* styly pro kontejner (wrapper)) od textu */
            div.c_jeden-radek_wrp {
                display: flex; /*nemenit*/
                
                /*odtud se muze menit*/
                justify-content: center;
            }
            
            /* styly pro jednotlivy radek textu */
            span.c_jeden-radek_text {
                /*odtud se muze menit*/
                color: white;
                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                font-weight: bold;
            }
            
        </style>
        
        <script>
            var g_rowCounter = 0;
            var g_texts = [];
            
            function vygenerujInputy(){
                var rowCount = parseInt(getVal('i_row-count'));
                var inputWrp = byId('i_row-inputs_wrp');
                var oneInput = null;
                
                inputWrp.innerHTML = '';
                
                for(let a = 1; a <= rowCount; a++){
                    var defText = '';
                    if(g_texts[a - 1]){
                        defText = g_texts[a - 1];
                    }
                    
                    oneInput = createRowInput(a, defText);

                    inputWrp.appendChild(oneInput);
                }
                
                g_rowCounter = rowCount;
            }

            function createRowInput(number, defText){
                var r = document.createElement('div');
                
                var input = document.createElement('input');
                input.setAttribute('id', 'i_row-input_' + number);
                input.setAttribute('class', 'c_row-input');
                input.setAttribute('name', 'label_' + number);
                input.value = defText;
                
                var numberSpan = document.createElement('span');
                numberSpan.innerHTML = number + ')&nbsp;&nbsp;';
                
                r.appendChild(numberSpan);
                r.appendChild(input);
                
                return r;
            }
            
            function getVal(htmlId){
                var r = byId(htmlId).value;
                return r;
            }   

            function byId(htmlId){
                var r = document.getElementById(htmlId);
                return r;
            }
            
            function VygenerujVystup(){
                
            }

            function vygenerujTabulku(){
                var outputWrp = byId('i_vystupni-div');
                outputWrp.innerHTML = '';

                if(g_rowCounter < 1){
                    window.alert('nejprve zvol počet řádků');
                } else {
                    var textSize = parseInt(getVal('i_velikost-textu'));
                    
                    if(textSize < 6 || textSize > 75){
                        window.alert('velikost textu musi byt v intervalu od 6 do 75 mm');
                    } else {
                        var frameSize = parseInt(getVal('i_sirka-ramecku'));   
                            g_texts = [];

                            var text = '';
                            var oneRowDom = null;
                            var reqData = "?";
                            var dataForAjax = {};

                            for(let a = 1; a <= g_rowCounter; a++){
                                text = getVal('i_row-input_' + a);
                                g_texts.push(text);
                                reqData += "label_"+a+"="+text+"&";
                                dataForAjax["label_" + a] = text;
                            }

                            

                            for(let a = 0; a < g_texts.length; a++){
                                oneRowDom = createWrappedSpan('jeden-radek', g_texts[a], textSize);
                                outputWrp.appendChild(oneRowDom);
                            } 
                            
                            console.log(g_texts);
                            console.log(reqData);
                            console.log(getVal('i_velikost-textu'));

                            dataForAjax.velikostTextu = getVal('i_velikost-textu');
                            dataForAjax.velikostTabulkyWidth = (document.querySelector("#i_vystupni-div").clientWidth + 2) / 0.2645833333333; //:D
                            dataForAjax.velikostTabulkyHeight = (document.querySelector("#i_vystupni-div").clientHeight + 2) / 0.2645833333333;

                            $.ajax({
                                method: "GET",
                                url: "stitek009c.cfm",
                                data: dataForAjax
                            });
                            /*
                            var reqObject = new XMLHttpRequest();
                            reqObject.open("POST", g_texts, true);
                            reqObject.send();*/

                       // }  
                    }
                }
            }

            //kdyz textSize je vetsi nez 0, nastavi se velikost textu podle tohoto cisla. jinak se necha vychozi velikost
            function createWrappedSpan(rawClassName, text, textSize){
                var r = document.createElement('div');
                r.setAttribute('class', 'c_' + rawClassName + '_wrp');

                var span = document.createElement('span');
                span.setAttribute('class', 'c_' + rawClassName + '_text');
                span.innerHTML = text;

                if(textSize > 0){
                    span.style.fontSize = textSize + 'mm';
                }
                
                r.appendChild(span);

                return r;
            }
        </script>
    </head>
    
    <body>
    
      <div>
        <b>Zvol počet řádků štítku &nbsp;&nbsp;</b>
    
        <select name="srows" id="i_row-count" onchange="vygenerujInputy()">
            <option value="0" name="m00" size="50" maxlength="30" type="text">0  
            <option value="1" name="m01" size="50" maxlength="30" type="text">1
            <option value="2" name="m02" size="50" maxlength="30" type="text">2
            <option value="3" name="m03" size="50" maxlength="30" type="text">3
            <option value="4" name="m04" size="50" maxlength="30" type="text">4
            <option value="5" name="m05" size="50" maxlength="30" type="text">5
        </select>
      
        <!--
            Výběr hodnot - počtu řádků - 1 - 5.
        -->
        <br><br>
        <div id="i_row-inputs_wrp" class="c_row-inputs_wrp"></div>
        <br>
        <span>velikost textu (milimetry)&nbsp;&nbsp;</span><input type="number" name="quantity" id="i_velikost-textu" min="6" max="75" range = "6,75" validate = "integer">
        <br>
        <!--
            Velikost textu je omezena od 6ti do 75ti.
        -->
        <br>
        <span>UPRAVIT - velikost tabulky šířka (milimetry)&nbsp;&nbsp;</span><input type="number" id="i_sirka-ramecku" class="c_form-input" list="bodySize">
        <br>  
        <br>
        <span>UPRAVIT - velikost tabulky výška (milimetry)&nbsp;&nbsp;</span><input type="number" id="i_vyska-ramecku" class="c_form-input" list="bodySize">
        <br>

        <br>
            <button onclick="vygenerujTabulku()" class="c_form-button">Náhled štítku</button>
        <br>



    </div>
    <div class="c_vystup_wrp" id="i_vystupni-div"></div>
       <cfform>
    <cfoutput>#label_1#</cfoutput>
      
      <!--
            here is label_1 just like a example
        -->
    
        
            <cf name="swidth" id="i_sirka-ramecku" onchange="vygenerujTabulku()"> 
        </cf>
    </cfform>
        
    </body>
</html>

Answer 1

Ajax变量存储在这里：

现在我要做的就是将它们列在图片中的 table 下。稍后我需要将它们保存在数据库中 - 所有输入：1 - 5，文本的大小以及 table 与文本的宽度和高度。

Answer 2

当您像发送 "stitek009c.cfm" 一样向 cfml 文件发送 ajax GET 请求时，您将发送所有数据该 cfm 模板的 URL 变量。因此，您已经使用 URL 范围内的变量向 stitek009c.cfm 模板提供了所有 ajax 数据。

据我了解，您还想添加 cfml 生成的内容并将其附加到表单底部。

为此，我在您的 jQuery ajax 请求中缺少其他代码：

$.ajax({
    method: "GET",
    url: "stitek009c.cfm",
    data: dataForAjax
});

上面的 ajax 请求遗漏了用于提供 ajax 请求结果的代码，该请求通常作为延迟对象提供给 jQuery 的 ajax .done() 方法。为了完成该代码，我提供了额外的行作为示例。如需进一步参考，请参阅 jQuery 的 ajax documentation:

$.ajax({
    method: "GET",
    url: "stitek009c.cfm",
    data: dataForAjax
    }).done( function( result ) {
        
            //populate div with returned html
            $('#ajaxReturn').html( result.contentHTML );

    }).fail( function( e ) { 
            
            //log some info and alert about fail
            console.dir( e.responseText );
            alert('Ops! Something went wrong!');

    });

从上面的示例代码可以看出，id为ajaxReturn的htmldiv将填充返回的 JSON 数据，因此您需要在 id= 的 div 容器之后将空容器 (<div id="ajaxReturn"></div>) 添加到表单底部“i_vystupni-div” 像这样：

...
    <div class="c_vystup_wrp" id="i_vystupni-div"></div>
    <div id="ajaxReturn"><!-- this container body will be populated with the genertated data of the stitek009c.cfm --></div>
</body>

最后，我为您提供了 stitek009c.cfm 的示例。此示例生成 URL 范围的简单 cfdump，并将其 returns 作为 JSON 对象：

<!--- stitek009c.cfm --->
<cfsavecontent variable="result.contentHTML">
    <!--- generate some cfml code --->
    <cfdump var="#url#">
</cfsavecontent>
<cfcontent reset = "true" />
<cfheader name="content-type" value="application/json" />
<cfoutput>#serializeJSON( result )#</cfoutput>

如何将 ajax 数组放入 coldfusion 变量？

How to put ajax array to coldfusion variable?

html

javascript

ajax

coldfusion

cfml