如何将输入的文本字段保存到Javascript对象文字中的name属性？

Question

assistant.parsePostParams((params) => {
    let message = {
        name: "anon",
        body: params.body,
        when: new Date().toISOString()
    }
}

首先让我作为序幕...这全都建立在与合作伙伴一起作为服务器和客户端项目的教室中。 我认为代码中存在很多问题的部分原因是因为我对此感到沮丧，并且只是写了什么然后尝试尝试，然后要么未正确删除所有代码，要么也未正确注释掉它。 某一时刻一切正常，但现在正在尝试添加。 我们通过使用茉莉花节点运行了一个spec.js. 无论如何再次感谢，这也是我的第一次发贴，请保持温柔。 显然，这不是我的完整代码，但是我想知道如何更改代码，以便“ anon”可以是用户输入的内容。 目前，我在客户端中使用“ body”，并根据需要输入消息。 但是我不知道如何输入用户名并将其保存为名称。 这是我认为与该问题最相关的代码部分。 我有2个主要文件，我的客户端和我的服务器以及3个对象。 因此，将所有内容链接到此处会有些问题。 任何帮助，将不胜感激，谢谢！

这是整个index.html。 它正在进行中...请别笑

<!DOCTYPE html>
<html lang- "en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <h1>Chat</h1>

    <div class="pickRoomDiv">
        <button id="pickRoom">Enter Room</button>
        <select>
            <option title="selectRoom">Select Room</option>
            <option title="chatRoom">chat room</option>
        </select>
    </div>

    <div id="form-input">
        <form id="name-form" action="/" method="POST">
            <input type="text" placeholder="Enter Username">
            <input type="submit" name="body" value="Submit Username">
        </form>
    </div>

    <div id="form-input" class="submitDiv">
        <form id="chat-form" id="newMessageInput" action="chat" method="POST">
            <input type="text" name="body" placeholder="Enter Message">
            <input type="submit" value="Submit Message">
        </form>
        <button id='getAllNow' action='chat' method='GET'>Get All Messages</button>
        <!-- <form id="getMessages" action="chat" method="GET"></form> -->

    </div>
    <div id='chat-log'></div>



    <script>
        let chatForm = document.getElementById('chat-form')
        let chatLog = document.getElementById('chat-log')
        let getMessages = document.getElementById('getAllNow')
        let submitName = document.getElementById('name-form')
        let since
        let messages = []

        chatForm.addEventListener('submit', (event) => {
            // prevents the event from performing the default function.
            event.preventDefault();
            let inputElement = chatForm.querySelector('input[name=body]')
            // let inputElement = document.getElementById('newMessageInput') 

            let message = inputElement.value

            // the function below gets all of the parameters from the URL so I can use them later.
            let params = new URLSearchParams();
            params.append('body', message)
            fetch('/chat', {
                method: 'POST',
                body: params,

            })
                .then((response) => response.json())
                .then((messages) => {
                    chatLog.innerHTML = messages.map(message => message.body).join('<br>')


                })

        })

        getMessages.addEventListener('click', (event) => {

            fetch('/chat', {
                method: 'GET',

            })
                .then((response) => response.json())
                .then((messages) => {

                    let latestFormatChatMessages = messages.map((message) => {

                        let newPTag = (`<p class="fancy"> <strong>${message.body}</strong></p> <p class="when">${message.when}</p> <p class="fancy"><strong>${message.name}</strong> </p>`)
                        return newPTag
                    })
                    chatLog.innerHTML = latestFormatChatMessages.join('<br>')
                    submitName.value
                })

        })

我将名称重新定义为未定义。 这是服务器代码。

const http = require('http');
const mime = require('mime-types');
const Assistant = require('./assistant');
const House = require('./lib/house');
const port = process.env.PORT || 5000;
let messages = [];
let house = new House();

http.createServer(handleRequest).listen(port);
console.log("Listening on port " + port);

function handleRequest(request, response) {
  let assistant = new Assistant(request, response);
  let path = assistant.path;
  let [_, base, roomId] = path.split('/')[1]

  if (roomId = "") {
    roomId === 'general'
  }
  roomId = roomId || 'general'

  function sendMessages(messages) {
    let data = JSON.stringify(messages);
    let type = mime.lookup('json');
    assistant.finishResponse(type, data);
  }
  // function submitName(messages) {
  //   let data = JSON.stringify(messages);
  //   let type = mime.lookup('json');
  //   assistant.finishResponse(type, data)
  // }

  try {
    let data = JSON.stringify(messages);
    let type = mime.lookup('json');
    if (path === '/') {
      assistant.sendFile('index.html');

    } else if (path === '/chat') {
      console.log(request.method)

      if (request.method === 'GET') {
        let room = house.roomWithId(roomId)
        let messages = room.messagesSince(0)
        sendMessages(messages)

      } else {
        console.log('Parsing the POST');
        assistant.parsePostParams((params) => {
          let message = {
            body: params.body,
            when: new Date().toISOString()

          }


          messages.push(message);

          assistant.finishResponse(type, data);
          console.log(type)

          house.sendMessageToRoom(roomId, message);


        })
      }

    } else {
      let fileName = path.slice(1);
      assistant.sendFile(fileName)
    }
  } catch (error) {
    assistant.sendError(404, "Error: " + error.toString());
  }
}


// function handleRequest(request, response0 {
//   let url = require('url')
// })

        // console.log('Parsing the GET')
        // let data = JSON.stringify(messages);
        // let type = mime.lookup('json');
        // assistant.finishResponse(type, data);

Answer 1

您的代码有很多问题。 查看您的代码，似乎您对服务器-客户端体系结构的工作方式尚无明确的想法。 似乎您正在尝试制作聊天应用程序。 您需要在这里照顾三件事。

客户：获取聊天室的名称，用户名和消息。 然后，按下按钮，通过发出POST请求将数据发送到服务器，然后等待响应。

服务器：接收客户端发送的数据并将其保存在数据库中。 如果保存成功，服务器将发送回成功响应。 此响应还可能包括数据库中保存的行。 如果保存失败，则应返回错误消息。

客户端：接收响应。 如果响应成功，则更新聊天列表。 如果响应是错误，则将错误消息传达给用户。

我固定了一点客户端，以便您获得所需的信息并将其发送到服务器。

客户

 const sendMessage = document.getElementById('send-message'); const username = document.getElementById('username'); const message = document.getElementById('message'); const chatLog = document.getElementById('chat-log'); const getMessages = document.getElementById('get-all-messages'); const messages = []; sendMessage.addEventListener('click', (e) => { const d = new Date().toISOString(); alert("Username: " + username.value + '\\n' + "Message: " + message.value + '\\n' + "When: " + d); // the function below gets all of the parameters from the URL so I can use them later. fetch('/chat', { method: 'POST', body: { body: message.value, name: username.value, when: d, }, }) .then((response) => response.json()) .then((messages) => { chatLog.innerHTML = messages.map(message => message.body).join('<br>') }); }); getMessages.addEventListener('click', (e) => { fetch('/chat', { method: 'GET', }) .then((response) => response.json()) .then((messages) => { let latestFormatChatMessages = messages.map((message) => { return `<p class="fancy"><strong>${message.body}</strong></p> <p class="when">${new Date(message.when)}</p><p class="fancy"><strong>${message.name}</strong> </p>`; }) chatLog.innerHTML = latestFormatChatMessages.join('<br>'); }); });

 <!DOCTYPE html> <html lang- "en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> <meta http-equiv="X-UA-Compatible" content="ie-edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Chat</h1> <div class="pickRoomDiv"> <button id="pickRoom">Enter Room</button> <select> <option title="selectRoom">Select Room</option> <option title="chatRoom">chat room</option> </select> </div> <div id="form-input"> <input id="username" type="text" placeholder="Enter Username"> <input id="message" type="text" placeholder="Enter Message"> <button id="send-message"> SEND </button> </div> <br> <br> <button id='get-all-messages'>Get All Messages</button> <div id='chat-log'></div> </body> </html>

我建议您从遵循一个教导您关键概念的教程开始。 有一个使用套接字的选项。 套接字有助于实时消息传递。

后续的中级教程应有助于您理解编程和代码格式化的概念。

聊天应用程序教程

如何将输入的文本字段保存到Javascript对象文字中的name属性？

问题描述

1 个解决方案

解决方案1
0 2018-07-31 08:53:18

如何将输入的文本字段保存到Javascript对象文字中的name属性？

问题描述

1 个解决方案

解决方案1 0 2018-07-31 08:53:18

解决方案1
0 2018-07-31 08:53:18