javascript - 接收和发送表单数据

Question

各位WEB开发的高手们好，我自己是这个领域的初学者，我正在做一个培训项目，所以问题就来了。有一个表格：

...
    <form name="date">
        <p>
            <label for="date">Choose date</label>
            <input type="date" name="calendar" id="calendar" onchange="handlerDate(event)">
        </p>
    </form>
...

然后我以这种方式处理：

function handlerDate(e) {
    e.preventDefault();
    let dateForm = document.forms["date"];
    let dateChosen = dateForm.elements["calendar"].value;
    let dateNow = new Date();
    dateChosen = new Date(dateChosen);

    if ($('#uncorrectDate').length)
        $('#uncorrectDate').remove();

    if ((dateChosen.getFullYear() !== dateNow.getFullYear() || dateChosen.getMonth() !== dateNow.getMonth()) ||
        ((dateChosen.getFullYear() === dateNow.getFullYear() || dateChosen.getMonth() === dateNow.getMonth()) &&
            (dateChosen.getDate() < dateNow.getDate()))
    ) {
        $('<p id="uncorrectDate">Incorrect date</p>').appendTo('.mainbody');
        $("#userInfo").remove();
    } else {
        if($('#userInfo').length)
            $('#userInfo').remove();

        var timesGet = GetOrders(dateChosen.toLocaleDateString());
        times = timesGet.booked;

        let selectTimes = '</p><p><label>Choose time: </label><select name="text">';
        for (let k = 0; k < times.length; k++) {
            let time = `${times[k]}:00`;
            selectTimes += '\n<option value="' + time + '">' + time + '</option>';
        }
        selectTimes += "</select><\p>";

        $('<form id="userInfo">' +
            '<p> ' +
            '<label for="email">Email:</label>' +
            '<input type="email" placeholder="[e-mail]" name="email"/></p>' +
            '<p>' +
            '<label for="phone">Телефон: </label>' +
            '<input type="tel" placeholder="(XXX)-XXX-XXXX" name="phone"/>' +
            '</p>' +
            '<p>' +
            selectTimes +
            '</p>' +
            '<p>' +
            '<button type="submit">Send</button>' +
            '</p>' + '</form>'
        ).appendTo('.mainbody');
    }
}

function GetOrders(date) {
    var result = "";
    $.ajax({
        url: "/api/records/" + date,
        type: "GET",
        async: false,
        contentType: "application/json",
        success: function (record) {
            result = record;
        }
    });
    return result;
}

function CreateOrder(userName, userMail, userPhone, userDate, userTime) {
    $.ajax({
        url: "api/users",
        contentType: "application/json",
        method: "POST",
        data: JSON.stringify({
            name: userName,
            email: userAge,
            phone: userPhone,
            date: userDate,
            time: userTime
        }),
        success: function (user) {
            $(".mainbody").append('<p>Заказ был сделан!</p>');
        }
    })
}

删除了对理解问题不必要的逻辑。第一个问题：通过jQuery以这种方式动态改变页面是正常的做法吗？因为我这样做纯粹是出于实际目的：为了完成一项任务，我并不完全按照习惯如何去做，如何不习惯去做。第二个也是主要问题：我现在如何从表单接收和正确发送数据？在这种情况下是否有示例语法（没有 php）。表单中有一个 onsubmit 属性，您可以在那里指定函数处理程序，但是有一个如何完成的示例吗？在这种情况下是否有必要在提交按钮上放置一个额外的处理函数 onclick？我需要从表单中获取数据，对其进行验证，然后使用该数据调用 CreateOrder 方法。在服务器上，这一切都会被正确处理，我配置好了，

标签： javascriptjqueryhtmlnode.js