原生Ajax使用get請求提交form表單時,將input標簽的name:value值轉換為字符串


背景

我在使用form進行傳遞數據的時候,發現不知道如何調用回調函數,
這個時候使用了原生的Ajax,但是使用xhr.open進行get請求的時候,需要帶上form標簽中input的數據.這里需要將input中的name:value轉換為字符串的形式進行顯式提交

代碼


        function collectionsInputArg(formNode) {// 將INPUT內容轉換為對象
            let saveNameAndValue = {}; // 返回的對象
            let notSaveNodes = []; // 主要用於調試所用 : 沒有保存進對象的節點列表,函數結束自動銷毀此變量.

            for (let item of formNode.elements) {
                if (!(item.name in saveNameAndValue) && item.nodeName === 'INPUT') { // 判斷唯一性  && 節點標簽
                    if (item.value == '') { // 如果值為空決定如何操作
                        item.value = ' '; // 這里設置了一個空格
                    }
                    saveNameAndValue[item.name] = item.value;
                } else {
                    notSaveNodes.push(item); // 調試信息
                    console.log(notSaveNodes);
                }
            }
            return saveNameAndValue;
        }

        function objTransformStrFn(transObject) { // 將對象轉換為字符串
            let returnStr = '';
            let objKeys = Object.keys(transObject);
            for (let item of objKeys) {
                if (transObject[item]) {
                    returnStr += item + '=' + transObject[item] + '&';
                }
            }
            return returnStr.slice(0, -1);
        }

        /*
        // 在AJAX中調用☑
        示例 : 
        const form1 = document.getElementById('form1');//獲取表單
        let saveObjTransformStr = objTransformStrFn(collectionsInputArg(form1));// 在請求事件中中調用此函數.

        結果 :
        URL : http://127.0.0.1:3000/?user_name= &sex=男&hobby=吃飯睡覺打豆豆
        轉換為字符串 : user_name= &sex=男&hobby=吃飯睡覺打豆豆

        */





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM