Блог

Главная - Вопросы по программированию - Не удается отобразить файл EJS в качестве ответа на запрос POST

Не удается отобразить файл EJS в качестве ответа на запрос POST

#javascript #express #ejs

Вопрос:

Я только начал изучать Express и серверы.

Проблема

Просто хотел загрузить еще одну страницу EJS на мой локальный хост:4000/ путь в качестве ответа после того, как был сделан запрос на публикацию формы.

Однако, хотя я и получаю ответ страницы EJS с данными из тела запроса в форме со стороны клиента. Кажется, я не могу загрузить страницу в браузере.

Есть какие-нибудь идеи? пожалуйста, помогите

Изображение моей проблемы здесь

 Express.js Server

let express = require('express');
let app = express();
let bodyParser = require('body-parser');
let path = require('path');
let fs = require('fs');

var urlencodedParser = bodyParser.urlencoded({extended:true});


app.use(express.json());
app.set('view engine', 'ejs');
app.use('/', express.static(__dirname   '/views'));
app.use('/', express.static(__dirname   '/views/partial'));

//Handling the GET request with the render of EJS file "index"
app.get('/', (req, res)=> {
  res.render('index');
});

//Handling the POST request from the client, and sending the EJS file "createAccount" as a response
app.post('/', urlencodedParser, (req, res) => {
  res.set('cache-control', 'max-age=0; private; no-cache');
  res.render('createAccount', {data:req.body}); //
});

app.listen(4000, ()=>{
  console.log('Port 4000 has been called');
});

ИЗМЕНИТЬ:
Я включил файл JS, который я использую для отправки запроса на публикацию ниже.

 document.querySelector('#btn').addEventListener('click', Master); 

async function Master(){
  
  console.log("Button clicked")

  const username = document.querySelector("#username").value;
  const password = document.querySelector("#password").value;

  let results = {
      "username": username, 
      "password": password
  };

  console.log(results);

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
    },
      body: JSON.stringify(results)
    };

    const post = await fetch('/', options);

    
};

Комментарии:

1. Укажите файл index.ejs или способ отправки запроса post.

2. здравствуйте, я отредактировал свой первоначальный вопрос, чтобы включить файл JS, который я использую для отправки запроса на публикацию!

3. Вы используете запрос XHR для отправки запроса, ваш браузер ничего не обновит, пока вы не обновите его вручную. Вы можете отправить запрос в виде обычной HTML-формы или получить ответ и обновить свой пользовательский интерфейс, например: $('#body').html(await post.text());

4. Извини, чувак, я довольно новичок во всем этом, так что надеюсь, ты не будешь возражать, если я спрошу. Вы предполагаете, что мне нужно будет включить эту строку как часть файла JS в самом конце, чтобы обработать ответ и впоследствии обновить пользовательский интерфейс?

5. const post = await fetch('/', options); $('body').html(await post.text());

Ответ №1:

Я не знаю, правильный ли это вопрос, лол, но нормально ли иметь один и тот же «/» в запросе get и post? Почему бы не положить в него что-нибудь?

приложение.сообщение(«/создать»)

затем также измените это

const post = ожидание выборки(‘/создать’, параметры);

Метки: