Функция GET с сервера заменяет HTML -страницу; очень простая задача связи клиент-сервер с express. js и jquery - PullRequest
Новая
       2

Функция GET с сервера заменяет HTML -страницу; очень простая задача связи клиент-сервер с express. js и jquery

1 голос
/ 21 июня 2020

Я действительно борюсь с днями и неделями с node.js / express. js на стороне сервера и html и jquery на стороне клиента, только чтобы получить простой обмен данными между ними. Простая задача:

  • клиент отправляет предложение «Запрос от клиента к серверу»
  • сервер отвечает на веб-сайте клиента с помощью «Запрос от клиента получен»

Хорошо, вот серверная часть: 

const url= require('url'),
      express = require('express'),
      app = express();
// Create a server

app.listen(8080, function (){
    console.log('Server running at http://127.0.0.1:8080/');
});

app.use (express.static (__dirname +'/public')); // provide public data,here: jQuery

app.get ("/", function (req, res){
    res.sendFile (__dirname +"/ClientServerExchange (1).html");
    console.log (__dirname, +req.url);
});

app.get ("/transmit", function (req, res) {
    res.send ("Request from  client received");
});

, а вот клиентская: 

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
        <title>Client-Server Exchange</title>
        <script src="JS/jquery-3.5.0.js" ></script>
        <style>
            
        </style>
        <script>
            $(document).ready (function (){             
                $.post(location.host, function (){
                    console.log ("Request submitted")});
            });
        </script>
    </head>
    <body>
        <p>Little server exhange</p></br>
        <form action="transmit" method="get">
            <input type="submit" value="Submit Request"></br>
            <p id="ServerResponse" name="ServerResponse"></p>
        </form> 
            
        
    </body>
</html>

Это работает, но я не знаю, где я буду помещать предложение «Запрос от клиента к серверу» как данные для отправки здесь. Далее, как только кнопка отправки нажата, веб-сайт заменяется новой стороной, показывающей сообщение сервера - это означает, что заголовок и кнопка исчезли, чего я не хочу. Я думаю, что сейчас я должен использовать AJAX, и попытался вставить что-то вроде этого в теги, например: 

$(document).ready (function (){             
    $("input").click (function () {
        $.post(location.host, function (){
            console.log ("Request sent")
        });
    });
});

, но html также будет заменен. Я удалил оператор действия в форме или установил для него значение «/» и установил первый параметр app.get с «/ transfer» на «/». У меня сложилось впечатление, что будет перезагружен только HTML, url отображается с "?", но больше ничего не делает.

У меня больше нет идей. Я прошел через так много руководств, справочников и всего остального. Либо мне было сложно отфильтровать то, что можно использовать, либо плохо объяснено.

Т.е. JQuery понимает GET как получение данных и POST как отправку, а Node.js (Express. js) понимает, откуда брать данные, либо из url-адреса через req.query.variable, либо напрямую из HTML -tags через req.body.tag ... или чего-то другого (честно говоря, я не поймите это ...)

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

1 Ответ

0 голосов
/ 21 июня 2020

То, что в настоящее время происходит с вашим кодом, - это всякий раз, когда ваш документ готов, запрос POST отправляется на ваш localhost, который является вашим / маршрутом. Я не могу понять, почему вы сделали такой код, но могу сказать, что этот код неверен двумя способами. Во-первых, вы запрашиваете домашнюю страницу 2 раза: один раз при загрузке страницы, а другой с помощью кода javascript, когда документ готов. Во-вторых, вы делаете запрос POST к маршруту GET. Другая проблема заключается в том, что всякий раз, когда вы отправляете форму, она перенаправляет вас на /transmit, поскольку для параметра действия установлено значение transmit. Следовательно, почему ваш код html исчезает, потому что ваш маршрут /transmit отправляет только предложение Request from client received.

Вот мое решение (с jQuery):

Измените свой код javascript на этот: 

$(document).ready (function (){             
    $("input[type='submit']").click (function () {
        const message = encodeURI($('#message').val());

        $.get(`/transmit?message=${message}`, function (data) {
            $('#ServerResponse').html(data);
        });
    });
});

И удалите элемент формы.

Что добавить на страницу html: 

<input type="text" id="message">

Вот мое решение (с ванилью Javascript) [РЕКОМЕНДУЕТСЯ]: 

function onSubmit() {
    const message = encodeURI(document.querySelector('#message').value);

    fetch(`/transmit?message=${message}`)
        .then(async res => {
            const {value} = await res.body.getReader().read();
            const text = new TextDecoder("utf-8").decode(value);
            
            document.querySelector('#ServerResponse').innerHTML = text;
        });
}

Что добавить на страницу html: 

<input type="text" id="message">
<button onClick="onSubmit()" id="submit-btn">

Для обоих решений:

Вы можете получить доступ к сообщению о коде сервера через req.query.message.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...