如何將輸入的文本字段保存到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