如何從另一個HTML文件獲取元素

-1

我試圖製作一個採用HTML文件中文本框的輸入的node.js應用程序。我想將這個值存儲在一個數組中，儘管我不知道如何。我的總體目標是創建一個聊天應用程序，並且我認爲有一些更簡單的方法可以在不需要引用HTML文件的情況下獲得輸入。如何從另一個HTML文件獲取元素

此外，有沒有HTML文件的任何模板，因爲我不是很熟練的HTML，使一個體面的網頁。所以如果有一些我可以使用的模板，一切都會更好。

我的代碼：

var events = require('events'); 
 
var express = require('express'); 
 
var http = require('http'); 
 
var app = express(); 
 

 
var msg = []; 
 

 
app.get('/', function(req, res) { 
 
    res.sendFile(__dirname + '/index.html'); 
 
}); 
 

 
app.read('/', function() { 
 

 
}); 
 

 
app.listen(3000, function() { 
 
    console.log("Server is running on port " + 3000); 
 
});

#firstHead { 
 
    font-family: Georgia, 'Times New Roman', Times, serif; 
 
}

<header> 
 
    <h1 id='firstHead'> 
 
    This is a header! 
 
    </h1> 
 
</header> 
 
<body> 
 
    <input type="text" id="inText" placeholder="Enter text here" /> 
 
</body>

幫助讚賞！

來源

2017-09-02 LawlessWalrus

標題應位於主體標記內 –

如果您想創建聊天應用程序，有更好的方法去解決它。查看https://socket.io/或類似的技術。 – jmargolisvt

好吧，我只是這樣做，我只是不確定是否必須使用HTML創建文本框，感謝您的幫助！ – LawlessWalrus

首先，你的HTML代碼有很多錯誤。此版本正確的代碼（你不會使用它，它只是給你的你做了什麼錯誤的想法）：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
     #firstHead { 
 
      font-family: Georgia, 'Times New Roman', Times, serif; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1 id='firstHead'> 
 
       \t This is a header! 
 
      \t </h1> 
 
    <form id="msg" method="GET" action="/msg"> 
 
     <input type="text" name="msgContent" id="inText" placeholder="Enter text here" /> 
 
     <input type="submit" value="Send"> 
 
    </form> 
 
</body> 
 

 
</html>

現在這個HTML頁面會發送輸入內容到localhost:3000/msg作爲POST請求See here for more details，這裏的問題是頁面將被刷新或重定向（取決於你的實現，如果你想要SPA，你應該在這種情況下使用AJAX）。即使您使用AJAX，您也很難使用HTTP請求實現聊天應用程序。使用WebSocket協議來實現這個功能會更好。有一個名爲Socket.io的模塊可以幫助你很多。它有一個事件驅動的系統，因爲它對實時應用程序非常棒，你可以查看他們的官方網站;他們有一個用幾百行代碼編寫的聊天應用程序的例子。

現在讓我們看一下你的服務器端代碼，首先..有沒有明確的方法稱爲read，這裏是你的代碼的工作版本：

var express = require('express'); 
 
var http = require('http'); 
 
var app = express(); 
 

 
var msg = []; 
 

 
app.get('/', function(req, res){ 
 
    //You should use some template engines like EJS or Pug to render your HTML page with messages or the user will see nothing 
 
    res.sendFile(__dirname + '/index.html'); 
 
}); 
 

 
app.get('/msg', function(){ 
 
    msg.push(req.query.msgContent); 
 
    res.redirect("/"); 
 
}); 
 

 
app.listen(3000, function(){ 
 
    console.log("Server is running on port " + 3000); 
 
});

將上面的代碼按照原樣工作，但是在客戶端cuz中你沒有看到任何東西（或者發送msg數組到客戶端腳本來嵌入它）。我只是想讓事情變得清晰，不會給你實現你的想法

我希望這對你有所幫助。

來源

2017-09-02 16:36:09

這也是不正確的，你在''中沒有'

'，應該是''！ – Stuart

Ops，我沒有注意到它：p –

如何從另一個HTML文件獲取元素

回答

相關問題