js进阶——使用js操作表单数据并回显

使用JavaScript操作表单数据并回显：实践与总结

在Web开发中，表单是非常常见的元素之一。如何通过JavaScript操作表单数据，处理数据结构并将数据回显到页面中，是一项非常有用的技能。在本文中，我将通过具体代码示例，详细介绍如何将表单数据封装为对象、根据需要替换属性名，并将对象数据回显到另一个表单。

1. 获取表单数据并封装为对象

表单元素结构

首先，我们需要一个包含多个输入框的表单，如用户名、兴趣爱好、工作等。HTML代码如下：

<form action="/" id="userform">
    用户名：<input type="text" name="username">
    兴趣爱好：<input type="text" name="hobby">
    工作：<input type="text" name="job">
    <button>提交</button>
</form>

使用JavaScript封装表单数据

接下来，通过JavaScript获取表单中的数据并将其封装为对象。为了灵活性，代码允许我们根据需要替换对象中的属性名。以下是关键的JavaScript函数 formDataToObj ：

function formDataToObj(form, replace) {
    const children = form.children;
    const obj = {};
    
    for (const child of children) {
        if (child.nodeName != 'BUTTON') {
            const name = child.name;
            const value = child.value;
            obj[name] = value;
        }
    }

    for (let key in replace) {
        obj[replace[key]] = obj[key];
        delete obj[key];
    }
    return obj;
}

代码详解：

1. 遍历表单子元素：通过 form.children 获取表单中的所有子元素，然后通过循环遍历。
2. 排除按钮元素：使用 if (child.nodeName != 'BUTTON') 来过滤掉按钮，避免其值被处理。
3. 封装为对象：通过表单元素的 name 属性作为键，将对应的 value 作为值，生成对象。
4. 属性替换：如果传入 replace 参数，允许将对象的键名进行替换。通过遍历 replace 对象，将旧键名替换为新键名。

使用示例

假设用户在表单中输入如下数据：

• 用户名：张三
• 兴趣爱好：篮球
• 工作：工程师

我们使用 formDataToObj 方法并传入一个替换键名的对象，将 username 替换为 name：

let userObj = formDataToObj(userform, { username: 'name' });
console.log(userObj);

执行后，控制台会输出如下对象：

{
    "name": "张三",
    "hobby": "篮球",
    "job": "工程师"
}

2. 将对象数据回显到表单中

获取数据后，有时需要将其回显到页面的另一个表单上，例如从数据库读取数据后展示。我们可以通过以下 objToFormData 方法实现：

function objToFormData(obj, form, objToForm) {
    if (!objToForm) {
        for (let key in obj) {
            const formElement = form.querySelector('.' + key);
            formElement.value = obj[key];
        }
    } else {
        for (let key in objToForm) {
            const formElement = form.querySelector('.' + key);
            formElement.value = obj[objToForm[key]];
        }
    }
}

代码详解：

1. 直接映射：如果不传入第三个参数 objToForm，则默认认为对象属性名和表单元素的类名是相同的，直接通过类名映射赋值。
2. 属性映射：如果传入 objToForm，则根据传入的映射关系将对象属性值赋给对应的表单元素。

使用示例

假设我们已经获取到用户对象 userObj，现在将其数据回显到另一个表单中：

const userformShow = document.getElementById('userform-show');
objToFormData(userObj, userformShow, {
    name: 'name',
    hobby: 'hobby',
    job: 'job'
});

这个操作会将 userObj 中的数据映射到相应的表单输入框中。

3. 综合示例

在实际项目中，我们可以通过 addEventListener 来监听表单的提交事件，并结合上面的两个方法实现数据的提取与回显。完整代码如下：

<form action="/" id="userform">
    用户名：<input type="text" name="username">
    兴趣爱好：<input type="text" name="hobby">
    工作：<input type="text" name="job">
    <button>提交</button>
</form>

<form action="/" id="userform-show">
    用户名：<input type="text" name="username" class="name">
    兴趣爱好：<input type="text" name="hobby" class="hobby">
    工作：<input type="text" name="job" class="job">
</form>

<script>
    let userObj;
    const userform = document.getElementById('userform');
    userform.addEventListener('submit', (event) => {
        event.preventDefault();
        userObj = formDataToObj(userform, { username: 'name' });
        console.log('表单数据封装为对象：', userObj);
    });

    userform.addEventListener('submit', (event) => {
        const userformShow = document.getElementById('userform-show');
        objToFormData(userObj, userformShow, {
            name: 'name',
            hobby: 'hobby',
            job: 'job'
        });
    });
</script>

4. 总结

通过本文，可以学会如何使用JavaScript将表单数据封装为对象，如何替换对象中的属性名，以及如何将对象数据回显到表单中。这些技巧在实际的Web开发中非常实用，能够帮助你更好地处理表单数据。

---