Node.js Ajax продолжает перезагружать новую страницу

Question

Я пытаюсь отправить данные формы с веб-сайта в мое приложение node.js.

На моем веб-сайте.

<script>
    $(document).ready(function (e) {
        $("#loginForm").submit(function () {
            e.preventDefault();
            var form = $("#loginForm");
            var url = form.attr("action");
            var formData = {};
            $(form).find("input[name]").each(function (index, node) {
                formData[node.name] = node.value;
            });
            $.post(url, formData).done(function (data) {
                alert(data);
            });

        });
    })
</script>
<form method="post" id="loginForm" action="/">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" name="username" id="inputEmail3" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" name="pasword" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12 text-right">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Файл server.js принимает звонок, это работает, и страница меняется на то, что говорит то, что я пытаюсь отправить обратно.

app.post('/', function (req, res) {
    var username = req.body.username;
    var htmlData = 'Hello:' + username;
    res.send(htmlData);
    console.log(htmlData);
});

По какой-то причине я не могу заставить страницу перестать перезагружаться.

Answer 1

Вы должны вызвать preventDefault для аргумента, переданного в обработчик onclick:

<script>
$(document).ready(function () {
    $("#loginForm").submit(function (e) {
        e.preventDefault();
        // ... ... ...
    });
})
</script>

Вы можете сделать то же самое, используя кнопку типа button и перехватывая событие onclick:

<script>
$(document).ready(function () {
    $("#theButton").click(function (e) {
        e.preventDefault();
        // ... ... ...
    });
})
</script>

<button id="theButton" type="button" class="btn btn-primary">Sign in</button>

Answer 2

Вы поместили аргумент e в неправильную функцию.

Попробуйте это

<script>
$(document).ready(function () {
    $("#loginForm").submit(function (e) {
        e.preventDefault();
        var form = $("#loginForm");
        var url = form.attr("action");
        var formData = {};
        $(form).find("input[name]").each(function (index, node) {
            formData[node.name] = node.value;
        });
        $.post(url, formData).done(function (data) {
            alert(data);
        });

    });
})
</script>