zoukankan      html  css  js  c++  java
  • 原生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=吃饭睡觉打豆豆
    
            */
    




  • 相关阅读:
    男子头部胀痛案
    摩这些穴位可以对付突发的疾病
    跟师学习时的几个经验方
    黄褐斑良方--- 疏肺散斑汤
    食积咳嗽的特点
    牙痛用药口决(来源于网络暂未验证)
    20多年脚气起泡脱皮瘙痒外洗方治验案
    起死回生通关散
    腰突辩治心得(付济华)
    战痘良方--付济华
  • 原文地址:https://www.cnblogs.com/gtscool/p/13096046.html
Copyright © 2011-2022 走看看