如何显示来自 mongodb 的全名作为输入值

Question

我有这个项目正在进行，使用ajax从api获取数据，每次我尝试从数据库中获取用户全名，我只得到名称的第一个单词，我如何让用户完整数据库中的名称并作为输入标签的值注入。

这是我的代码：

getProfile();
    //Get Profile
    function getProfile() {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:3000/users/me',
            headers: {
                'Content-Type': 'application/json'
            },
            crossDomain: true,
            cache: false,
            success: function (data) {
                console.log('Get Profile Successfully!')
                console.log(data)
                let profile_name = '';
                let view = '';
                    view += "<form class='needs-validation' id='forms' novalidate>";
                    view += "<div class='form-row'>";
                    view += "<div class='col-md-12 mb-3'>";
                    view += "<label for='validationCustom01'>Full Name</label>";
                    view += "<input type='text' class='form-control' id='validationCustom01' placeholder='Full Name' value="+data.name+">";
                    view += "</div>";
                    view += "<div class='col-md-12 mb-3'>";
                    view += "<label for='validationCustom02'>Email Address</label>";
                    view += "<input type='email' class='form-control' id='validationCustom02' value=" + data.email + "  disabled>";
                    view += "</div>";
                    view += "<div class='col-md-12 mb-3'>";
                    view += "<label for='validationCustom03'>Age</label>";
                    view += "<input type='number' class='form-control' id='validationCustomUsername' placeholder='Age' value=" + data.age + ">";
                    view += "</div>";
                    view += "<div class='col-md-12 mb-3'>";
                    view += "<label for='validationCustom03'>Password</label>";
                    view += "<input type='password' class='form-control' id='validationCustom04' placeholder='Password'>";
                    view += "</div>";
                    view += "<div class='col-md-12 mb-3'>";
                    view += "<label for='validationCustom03'>Repeat-Password</label>";
                    view += "<input type='password' class='form-control' id='validationCustom05' placeholder='Repeat-Password'>";
                    view += "</div>";
                    view += "<button class='btn btn-primary' type='submit'>Save</button>";
                    view += "</form>";
                    profile_name += " <p class='name'>"+data.name+"</p>";
                    profile_name += "<p class='role'>Task Manager</p>";

                $('.users-form').html(view);
                $('.profile_data').html(profile_name);

            },
            error: function (error) {
                console.log(error)
            }
        });
    };

Answer 1

在value="+data.name+"，假设data.name 是Cat Hat；当表达式被计算时，它变成value=Cat Hat——这使得HTML解析器认为第一个空格是一个新属性的开始。 解决方案是在值周围添加引号，如下所示：value='"+data.name+"'。

您还应该 HTML 实体 name，这样您就没有 XSS 漏洞（data.name = ' onload=alert(1)）。其余的模板也是如此。