Отправьте форму с Ajax в серверную часть узла

Question

Я новичок в node, и я пытаюсь отправить форму и передать данные через Ajax и обработать данные на бэкэнде Node. После обработки данные должны быть отправлены обратно и отображены в index. html. Но перед отправкой каких-либо данных у меня уже возникли проблемы с отправкой данных на серверную часть узла.

Для этой задачи есть ограничения. Я был проинформирован о том, чтобы достичь вышеуказанного без использования каких-либо внешних библиотек, таких как express, request et c.

Я считаю, что server. js, index. js, router. js имеет без проблем. Но для наглядности я показал это ниже. Проблема может быть в коде ajax и функции convert {}. На данный момент я просто веду данные console.logging в каждой точке, чтобы убедиться, что данные передаются на узел.

Вот мой код ниже, как ни странно, я не могу понять, почему он не работает должным образом, я потратил много часов на этом.

Я получил в командной строке сообщение «Hello World» от функции convert {} в файле обработчика запросов. Кажется, что Ajax работает нормально, по крайней мере, на xhr.open. Но код под console.log («Hello World»); не выполняется (request.addListener). Затем он снова открывает мой файл index. html, потому что моя командная строка показывает, что обработчик «/» выполняется.

Очень признателен за любые советы по исправлению этого. Спасибо!

index. html:

        <form method="post" id = "fform">
        <input type="checkbox" id="text1" name="number1" >
        <label for="text1"> Number 1</label><br />
        <input type="checkbox" id="text2" name="number2" >
        <label for="text2"> Number 2</label><br />
        <h4>Select a date</h4>
        <select id="text3" name="month">
            <option value="01">Jan</option>
            <option value="02">Feb</option>
            <option value="03">Mar</option>
            <option value="04">Apr</option>
            <option value="05">May</option>
            <option value="06">Jun</option>
            <option value="07">Jul</option>
            <option value="08">Aug</option>
            <option value="09">Sep</option>
            <option value="10">Oct</option>
            <option value="11">Nov</option>
            <option value="12">Dec</option>
        </select>
        <select id="text4" name="year">
            <option value="2009">2007</option>
            <option value="2009">2008</option>
            <option value="2009">2009</option>
            <option value="2009">2010</option>
            <option value="2009">2011</option>
            <option value="2009">2012</option>
            <option value="2009">2013</option>
            <option value="2009">2014</option>
            <option value="2009">2015</option>
            <option value="2009">2016</option>
        </select>
        <h4>Output Type</h4>
        <input type="checkbox" id="text5" name="table" >
            <label for="text5"> As a Table</label>
        <input type="checkbox" id="text6" name="graph" >
            <label for="text6">As a Graph</label><br /><br />
        <<button type="submit" onclick="return showData()" >Submit</button>

Index. html скрипт. xhr.send - это строка для тестирования.

<script>
    function showData() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST","./convert",true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send("foo=bar&lorem=ipsum");
    }
</script>

Index. js

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handle = {};
handle["/"] = requestHandlers.reqStart;
handle["/convert"] = requestHandlers.convert;

server.startServer(router.route, handle);

Router. js

var url = require("url");

function route(pathname, handle, response, request) {
    console.log("Routing a request for: "+ pathname);

    if (typeof handle[pathname] === 'function') {
        handle[pathname](response, request);
    } else {
        console.log("Nothing found for: " + pathname);
        response.writeHead(404, {"Content-Type": "text/plain"});
        response.write("Resource cannot be found!");
        response.end();
    }
}
exports.route = route;

Server . js

var http = require("http");
var url = require("url");

function startServer(route, handle) {
    function onRequest(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Requesting for " + pathname + " received.");   
        route(pathname, handle, response, request);
    }
    http.createServer(onRequest).listen(41075);
    console.log("Server is now started.");
}

exports.startServer = startServer;

обработчик запроса. js

var qs = require("querystring");
var fs = require("fs");
var url = require("url");

function reqStart(response, request) {
 //processing goes here to open index.html, code hidden, no problem here
}

function convert(request, response) {

    console.log("Hello World");

    request.addListener('data', function(dataChunk) {
        console.log("Received POST chunk'"+dataChunk+"'.");
        request.addListener('end', function() {
            console.log("You've sent: " + dataChunk);
            response.end();
        });
    });
}

Answer 1

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

Поскольку вы не отменяете событие щелчка (возвращая false в функции), вы попытаетесь ajax И отправить заодно

Вот способ получше

window.addEventListener("load",function() {
  document.getElementById("fform").addEventListener("submit",function(e) {
    e.preventDefault(); // stop submission
    let xhr = new XMLHttpRequest();
    xhr.open("POST","./convert",true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send("foo=bar&lorem=ipsum");
  }) 
})

Answer 2

onclick="return showData()"

Когда вы используете подход 1990-х годов для добавления прослушивателей событий, возврат false из функции предотвратит поведение по умолчанию (то есть регулярную отправку формы) на URL, указанный в action атрибут (или текущий URL-адрес, если атрибут action отсутствует).

Вы возвращаете возвращаемое значение showData. Эта функция имеет no return оператор , поэтому она возвращает undefined.

Это не препятствует отправке обычной формы, поэтому после инициирования запроса Ajax форма отправляется и загружается новая страница (убивает страницу, на которой запущена программа JavaScript, ожидающая ответа на запрос Ajax).

Вам необходимо return false.

Современный подход состоит в том, чтобы связать ваш прослушиватель событий с JavaScript и использовать метод preventDefault, чтобы остановить отправку формы:

const form = document.querySelector("form");
form.addEventListener("submit", showData);

function showData(event) {
    event.preventDefault();
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "./convert");
    const params = new URLSearchParams();
    params.append("foo", "bar");
    params.append("lorem", "ipsum");
    xhr.send(params);
}