关于formData放入数值对象失败

  1. 在前台使用formData封装数据并通过xhr对象发送请求时发现formData中的数据放不进去的问题:

  2. 代码:

 function register() {
            const username = document.getElementById('input').value;  //已验证可获取到
            const psw = document.getElementById('psw').value;//已验证可获取到
            
            var formData = new FormData();
            formData.append('username', username);
            formData.append('psw', psw);
            console.log(formData);

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                        alert(xhr.responseText);
                    } else {
                        alert("Response was unsuccessful:" + xhr.status);
                    }
                }
            };
            xhr.open("post", "http://localhost:3000/register", true);
            xhr.send(formData);

在客户端输出formData的值发现为空:

clipboard.png

请大家帮忙解答,谢谢~

阅读 8.3k
2 个回答

FormData打印出来就是空的,传到后台看看是否能接收到,或者在调试工具的netWork里面去看传送参数,

// 对于Jq的扩展函数
jQuery.fn.extend({

/**
 * 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/entries
 * [serializeFormData 序列化表单的参数,不包含资源文件]
 * @param  {[type]} formData [description]
 * @return {[type]}          [description]
 */
serializeFormData: function() {
    var _self = $(this);
    var isFormData = _self.isFormData();
    var objFormData = {};
    if (isFormData) {

        // Array.from( new FormData( $('form')[0] ) );
        var list = Array.from(_self[0]);
        for(var index in list)
        {
            var value = list[index];
            if (typeof value[0] == "string" && typeof value[1] == "string") {
                objFormData[value[0]] = value[1];
            }
        }

        // 参考
        // https://segmentfault.com/a/1190000004365693
        // http://www.cnblogs.com/Wayou/p/es6_new_features.html
        // 2015年出ECMAScript 6新特性,旧版浏览器不支持下面语法(如华为QQ浏览器和自带浏览器)
        // for (var value of _self[0].entries()) {
        //     D('value',value, _self[0].entries());
        //     if (typeof value[0] == "string" && typeof value[1] == "string") {
        //         objFormData[value[0]] = value[1];
        //     }
        // }
    }
    return objFormData;
},
/**
 * [isFormData 判断是否是 form data ]
 * @param  {[type]}  formData [description]
 * @return {Boolean}          [description]
 */
isFormData: function() {
    return $(this)[0].constructor === FormData;
    // 遇到 ios 浏览器没有 constructor.name 判断就失效了,上面的判断对象方式更准确
    // return this.getObjName() === 'FormData';
},
/** [getObjName 获取类名] */
getObjName: function() {
    return $(this)[0].constructor.name;
}

});

请你参考 serializeFormData 具体的实现方式,这个功能我写过很多遍了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏