javascript - 如何从输入字段中获取值并将其发送到服务器 firebase

Question

我的目标是从输入元素中获取一个值，将其存储在一个对象中并将该对象发送到 firebase。数据似乎没有保存。user.name 和 user.surname 在我输入内容后显示未定义。我试过下面的代码：

html代码：

<form>
    First name:<br>
    <input type="text" class="firstname"><br>
    Last name:<br>
    <input type="text" class="lastname">
    <br><br>
   <button id="button" type="submit">Submit</button> 
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="index.js"></script>

Javascript代码：

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";
const user = {
    name: document.querySelector(".firstname").value,
    surname: document.querySelector(".lastname").value
};


class Search {
    constructor(query) {
        this.query = query;
    }

async Getresult() {
    try {
        axios.post(url, JSON.stringify(this.query))
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                alert(error);
            });

    } catch (error) {
        alert(error);
    }
}
}

const search = new Search(user);

but.addEventListener("click", function (e) {  
    e.preventDefault();
    search.Getresult();
 });

标签： javascript

Answer 1

您获取输入元素值的代码仅在加载页面时触发一次。您可以在处理 btn 单击时获取值，以确保您拥有最新数据。例子：

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";

class Search {
    async Getresult(query) {
        try {
            axios.post(url, JSON.stringify(query))
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    alert(error);
                });

        } catch (error) {
            alert(error);
        }
    }
}

const search = new Search();

but.addEventListener("click", function (e) {
    const user = {
        name: document.querySelector(".firstname").value,
        surname: document.querySelector(".lastname").value
    };

    e.preventDefault();
    search.Getresult(user);
});

如果要在构造函数中传递用户，则必须Search在处理btn单击时创建一个新实例：

const but = document.getElementById("button");
const url = "https://xxxxxx.firebaseio.com/post.json";

class Search {
    constructor(query) {
        this.query = query;
    }

    async Getresult() {
        try {
            axios.post(url, JSON.stringify(this.query))
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    alert(error);
                });

        } catch (error) {
            alert(error);
        }
    }
}


but.addEventListener("click", function (e) {
    e.preventDefault();

    const user = {
        name: document.querySelector(".firstname").value,
        surname: document.querySelector(".lastname").value
    };

    const search = new Search(user);

    search.Getresult();
});