如何將ajax陣列放入coldfusion變數？-有解無憂

我正在處理一個問題，我需要一些幫助。我正在處理填充特殊機器標簽的 HTML 代碼。它是一種網頁，人們在其中填寫行數和文本大小，然后輸入他們希望結果表在每行中包含的行的文本。

我需要關于如何將 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 變數，然后將它們列在程式的底部。你可以在這張照片中看到它。

如何將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>
      
        <!--
            Vybě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 vy?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>

uj5u.com熱心網友回復：

Ajax 變數存盤在這里：

現在我要做的就是將它們列在圖片中的表格下方。后來我需要將它們保存在資料庫中 -所有輸入：1 - 5，文本的大小以及帶有文本的表格的寬度和高度。

如何將ajax陣列放入coldfusion變數？

uj5u.com熱心網友回復：

當您像對"stitek009c.cfm"一樣向 cfml 檔案發送 ajax GET 請求時，您將所有資料作為 URL 變數發送到該 cfm 模板。因此，您已經將所有 ajax 資料提供給您的 stitek009c.cfm 模板以及URL范圍內的變數。

據我了解，您還想添加 cfml 生成的內容并將其附加到表單的底部。

為了實作這一點，我在您的 jQuery ajax 請求中缺少其他代碼：

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

上面的 ajax 請求遺漏了用于提供 ajax 請求結果的代碼，該代碼通常由 jQuery 的 ajax 作為延遲物件使用.done()方法提供。為了完成該代碼，我提供了額外的行作為示例。如需進一步參考，請參閱 jQuery 的 ajax 檔案：

$.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的 html div 將填充回傳的 JSON 資料，因此您需要將空容器 ( <div id="ajaxReturn"></div>)添加到表單底部的id= 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 并將其作為 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/364825.html

標籤：javascript html 阿贾克斯 coldfusion cfml

上一篇：使用AJAX將result.php提交到bootstrapModal

下一篇：當通過Ajax將資料發送到Laravel中的控制器時，資料為空