使用node.js + express插入SQLITE表，而javascript不起作用

Question

我正在尝试使用javascript函数将简单HTML格式的数据传递给sqlite。但是在sqlite数据库中仅创建空行。这是我的代码：

generate.html

<form action="/visitors" method="post">
                <h1>Create Invitation</h1>
                <div class="input-container"><i class="fas fa-user icon"></i><input class="input-field" type="text" placeholder="Name" name="name" id=name required></div>
                <div class="input-container"><i class="fas fa-phone icon"></i><input class="input-field" type="text" placeholder="Phone Number" name="phoneNumber" id=phone required></div>
                <div class="input-container"><i class="fas fa-envelope icon"></i><input class="input-field" type="email" placeholder="Email" name="email" id=email required ></div>
                <button class="btn-create-invitation" onclick="createInvitation()">Create Invitation</button>
                    </form>

server.js

app.post('/visitors', function(request,response){
    console.log('POST request received at /visitors');
    db.run('INSERT INTO visitors(host_id, visitor_name, visitor_phone, visitor_email, reference_no) VALUES (?,?,?,?,?)', [request.body.host_id, request.body.visitor_name, request.body.visitor_phone, request.body.visitor_email, request.body.reference_no], function(err) {
        
        if (err) {
            console.log("Error: "+err);
        }
        else {
            response.status(200).redirect('generate.html');
        }
    });
});

client.js

function createInvitation () {
    
    var host_id = localStorage.getItem('id');
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;
    //generate 8-digit random number
    var refNo = Math.floor(Math.random()*89999999+10000000);
    
    if (name == "" || phone == "" || email == "")
        {
            alert("Please fill in all details!");
        }
    else {
        
        $.post('/visitors', {host_id: host_id, visitor_name: name, visitor_phone: phone, visitor_email: email, reference_no: refNo},function(data) {
            window.location.reload();
        });
    }
}

任何建议或意见，将不胜感激。预先感谢。

Answer 1

您已经声明要提交给定操作“ / Visitors”上的数据的表单，并且该方法是post，并且您还使用客户端代码将数据发送到服务器。

您需要删除表单操作和方法以使其成为简单表单，以便onClick按钮上调用的客户端代码可以执行其工作。

<form>
                <h1>Create Invitation</h1>
                <div class="input-container"><i class="fas fa-user icon"></i><input class="input-field" type="text" placeholder="Name" name="name" id=name required></div>
                <div class="input-container"><i class="fas fa-phone icon"></i><input class="input-field" type="text" placeholder="Phone Number" name="phoneNumber" id=phone required></div>
                <div class="input-container"><i class="fas fa-envelope icon"></i><input class="input-field" type="email" placeholder="Email" name="email" id=email required ></div>
                <button class="btn-create-invitation" onclick="createInvitation()">Create Invitation</button>
                    </form>