JavaScript -js进阶 - 对象简写

最新推荐文章于 2025-01-11 20:03:00 发布

Henry_ww

最新推荐文章于 2025-01-11 20:03:00 发布

阅读量385

点赞数

分类专栏： JavaScript 文章标签：前端开发 JavaScript 对象简写 JSON.stringify 表单提交

本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/119972750

版权

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>对象简写</title>
    </head>
    <body>
        用户名:<input type="text" name="username" /> 密码: <input type="password" name="password" />
        <button>提交</button>
    </body>
    <script>
        // 需求: 点击提交按钮, 将用户名和密码 提交给服务器
        document.querySelector("button").addEventListener("click", () => {
            // 获取元素
            let username = document.querySelector('[name="username"]').value.trim();
            let password = document.querySelector('[name="password"]').value.trim();

            // 多个数据打包: 变成对象
            // let obj = { username: username, password: password }
            // 如果一个变量名: 刚好可以做属性名, 可以简化对象的写法
            let obj = { username, password };
            // 系统处理: 发现对象内部属性就一个变量: 将变量名当做属性名, 将变量的值解析后变成属性值
            // 简写: 一定为了简化代码的书写

            console.log(obj);

            // 提交给服务器: 对象不能传输: 转成字符串
            obj = JSON.stringify(obj);
            console.log(obj);
        });
    </script>
</html>