Нужны советы с AJAX и js

Question

Я хочу добавить нового пользователя в базу данных mysql и знаю, как выполнять запросы с одной уникальной строкой поиска, но теперь у меня их четыре.

4 ввода

<div id="data">
            User:
            <input type="text" name="UserName" id="name_u"></textarea>
            <br>
            Password:
            <input type="password" name="contraseña" id="pass_u">
            <br>
            Email:
            <input type="email" name="email" id="email_u">
            <br>
            BirthDate:
            <input type="date" name="BirthDate" id="bday_u">
            <br>
            <input value="Registrar" type="button" onclick="add_u()">
        </div>

Моя проблема в том, что я не знаю, как заставить AJAX и написать js, чтобы они работали.

app.get ('/useradd',(req, res)=>{
var name_u = req.query.name_u;
var pass_u = req.query.pass_u;
var email_u = req.query.email_u;
var bday_u = req.query.bday_u;
mysqlConnection.query('INSERT INTO user (UserName, Password, email, BirthDate, level, U_rank) VALUES ()', [search], (err, rows, fields)=>{
    if (!err){
        console.log(rows);
        res.end(rows);
    }
    else
        console.log(err);
    })

});

Это код, который я использую на своем js.

Если кто-то может мне помочь, я очень ценю это.

Answer 1

Оберните ваши входные данные в , а не в

<form method="POST" enctype="multipart/form-data" id="myform">
    <input type="text" name="title"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="Submit" id="btnSubmit"/>
</form>

<h1>jQuery Ajax Post Form Result</h1>

<span id="output"></span>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 

Используйте next javascript для сбора и отправки данных формы

$(document).ready(function () {

    $("#btnSubmit").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        // Get form
        var form = $('#myform')[0];

       // Create an FormData object 
        var data = new FormData(form);

       // If you want to add an extra field for the FormData
        data.append("CustomField", "This is some extra data, testing");

       // disabled the submit button
        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/upload.php",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 800000,
            success: function (data) {

                $("#output").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);

            },
            error: function (e) {

                $("#output").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);

            }
        });

    });

});