zoukankan      html  css  js  c++  java
  • FormData 数据转化为 json 数据

    两种方法

    <!-- 实例:将 FormData 转化为 json -->
    
    <meta charset="utf-8"/>
    
    <form enctype='application/json' method="post">
        <label>用户:</label>
        <input type="text" name="user"></br>
        <label>密码:</label>
        <input type="texteara" name="password"></br>
    
        <input type="submit" value="提交">
    </form>
    
    
    
    <script>
    
    // 版本二(箭头语法)
    var convert_FormData_to_json2 = function (formData) {
        var objData = {};
        
        formData.forEach((value, key) => objData[key] = value);
        
        return JSON.stringify(objData);
    };
    
    // 版本一
    var convert_FormData_to_json = function (formData) {
        var objData = {};
        
        for (var entry of formData.entries()){
            objData[entry[0]] = entry[1];
        }
        return JSON.stringify(objData);
    };
    
    // 显示根据Form生成的json数据
    var formobj = document.querySelector('form');
    formobj.addEventListener('submit', function(event){
        event.preventDefault();
    
        console.log(convert_FormData_to_json(new FormData(formobj)));
        console.log(convert_FormData_to_json2(new FormData(formobj)));
    
    }, false);
    </script>
    

    效果图

    打开浏览器控制台

  • 相关阅读:
    冲刺第一天
    就用户界面和体验评价搜狗输入法
    学习进度条10
    典型用户及用户场景描述
    学习进度条09
    冲刺阶段第八天
    对石家庄铁道大学网站的UI分析
    学习进度条(第八周)
    冲刺阶段第七天
    冲刺阶段第六天
  • 原文地址:https://www.cnblogs.com/hhh5460/p/6599178.html
Copyright © 2011-2022 走看看