#javascript #express #fetch
#javascript #экспресс #извлечение
Вопрос:
В моем коде я хочу передать идентификатор от клиента к серверу. Я пытаюсь использовать выборку, устанавливающую тип содержимого в Application / json, но, похоже, у нас возникли некоторые проблемы (я проанализировал запрос, и он не создает тело). Есть ли простой способ передать данные от клиента к серверу?
{#each accounts}}
<form action="/users/chat" method="POST">
<div class="form-group">
<p>{{@index}}</p>
<label for="name" value={{username}}>{{username}}</label>
</div>
<div class="form-group">
<label for="name">{{email}}</label>
</div>
<button class="myButton" id="{{@index}}">chat</button>
</form>
{{else}}
<p>No account</p>
{{/each}}
<script>
const buttons = document.getElementsByClassName('myButton');
for (var i = 0; i < buttons.length; i ) {
buttons[i].addEventListener('click', function(e) {
let ident=this.id;
console.log(ident);
console.log('button was clicked');
fetch("/myurl",{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify({id : ident})
})
}
</script>
Комментарии:
1. Привет! Кажется, это работает. Вы получаете какие-либо ошибки? Кстати, если вы заинтересованы только в отправке данных на сервер, вам не нужен
Accept
заголовок.2. Я не получаю никакой ошибки, но на стороне сервера, если я пытаюсь напечатать тело запроса, у меня получается пустое тело. Еще одна мысль, которую я заметил, заключается в том, что тип содержимого моего запроса изменяется с Application / Json на application / x-www-form-urlencoded. Я должен также получать данные с сервера, вот почему мне нужно принять 🙂
3. Вы проверили DevTools на клиенте? Я сделал аналогичный запрос с помощью Chrome DevTools, и он показал мне правильные заголовки и правильное тело. Возможно, это проблема на стороне сервера.
4. Это то, что я делаю на стороне сервера router.get(‘/chat’, ensureAuthenticated, (req,res)=>{ console.log(req.body); res.render(‘чат’); })
5. не могли бы вы опубликовать свой серверный код?
Ответ №1:
Вот код сервера:
var express = require('express');
var router = express.Router();
var app = express();
var bcrypt = require('bcryptjs');
const db = require('../config/database');
const Account = require('../models/Account');
const chat = require('../models/chat');
const Sequelize = require('sequelize');
const Op = Sequelize.Op;
var passport = require('passport');
LocalStrategy = require('passport-local').Strategy;
const {ensureAuthenticated}=require('../config/auth');
app.use(express.urlencoded());
app.use(express.json());
//Socket
const PORTS = process.env.PORT || 7001;
var client = require('socket.io').listen((PORTS, console.log`SOCKET started on port ${PORTS}`)).sockets;
var password;
var username;
var accounts;
//Register
router.get('/register', function(req,res){
res.render('register');
});
//CHAT
router.get('/chat', ensureAuthenticated, (req,res)=>{
console.log(request.body.user.id);
res.render('chat');
});
module.exports=router;
Ответ №2:
Тщательно проверив, эта строка здесь, в вашем запросе от клиента, является причиной fetch("/myurl",{ ...
Если вы видите руководство по адресу MDN
, использование является fetch('http://example.com/movies.json')
. Fetch API
ожидается завершение url/uri
вместе с протоколом ( http, https
) и т.д.
Итак, ваш запрос должен быть похож:
fetch("http://yourdomain.com", { ...