我正在向服務器發出 Ajax post 請求，所有數據都很好，但我的 first_name 和 last_name 被更新為“未定義”

Question

我正在向服務器發出 Ajax post 請求，所有數據都很好，但我的 first_name 和 last_name 正在更新為“未定義”請幫助提前致謝

--- 服務器代碼 ---

我在查詢中插入這個變量，以便可以用這些值更新數據庫

app.post("/postData", function (req, res) {
    var first_name = req.body.fname
    var last_name = req.body.lname
    var email = req.body.email
    var comment = req.body.comment
    var insert_query = "INSERT into form_data(sno,fname,lname,email,comments) values(" + "1" + "," + "'" + first_name + "'" + "," + "'" + last_name + "'" + "," + "'" + email + "'" + "," + "'" + comment + "'" + ")";
    connector.query(insert_query, function (err, res) {
        if (err) {
            var insert_query1 = "INSERT into form_data(sno,fname,lname,email,comments) values(" + "''" + "," + "'" + first_name + "'" + "," + "'" + last_name + "'" + "," + "'" + email + "'" + "," + "'" + comment + "'" + ")";    
            connector.query(insert_query1,function(err,res){
                if (err) {
                    console.log("Query Error")
                } else {
                    console.log("Failed data updated")
                    console.log(insert_query1)
                }
            })
        } else {
            console.log("Data Updated")
        }
    })
})

app.listen(1337, function (err) {
    if (err) {
        console.log(err)
    } else {
        console.log("Connection Established at port:1337")
    }
})

--- HTML ---

這是單擊按鈕后必須執行的ajax請求的表單

<script>
    $(document).ready(function () {
                $("#btn").click(function(event){
                    event.preventDefault();
                    $.ajax({
                        url : "http://127.0.0.1:1337/postData",
                        type : "POST",
                        data : {
                            "first_name" : $("#fn").val(),
                            "last_name" : $("#ln").val(),
                            "email" : $("#em").val(),
                            "comment" : $("#com").val()
                        },
                        dataType : "json",
                        success : function(){
                            console.log(data)
                        }
                    })
                })
            })
</script>

<form id="frm1">
    <label for="name1">First name</label>
    <input type="text" name="fname" id="fn" value=""><br><br>
    <label for="name2">Last name</label>
    <input type="text" name="lname" id="ln" value=""><br><br>
    <label for="femail">Email</label>
    <input type="email" name="email" id="em" value=""><br><br>
    <label for="comm">Comments</label>
    <textarea cols="20" rows="10" id="com" name="comment"></textarea><br><br>
    <input type="submit" value="Submit" id="btn">
    <input type="reset" value="Reset" id="rest">        
    <input type="button" value="Delete" id="del">        
</form>

'

- - 錯誤 - -

這是我得到的錯誤

Answer 1

    <script>
        $(document).ready(function () {
                    $("#btn").click(function(event){
                        event.preventDefault();
                        $.ajax({
                            url : "http://127.0.0.1:1337/postData",
                            type : "POST",
                            data : {
                                "fname" : $("#fn").val(),
                                "lname" : $("#ln").val(),
                                "email" : $("#em").val(),
                                "comment" : $("#com").val()
                            },
                            dataType : "json",
                            success : function(){
                                console.log(data)
                            }
                        })
                    })
                })
    </script>