Блог

Главная - Вопросы по программированию - Передача данных от клиента к серверу

Передача данных от клиента к серверу

#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", { ...