如何使用 Node.js 读取文本文件并将其写入 HTML 页面？

Question

I have a text file that I would like to read with Node.js using the fs module. I know how to read the file but I do not know how to take the data of the text files and be able to put it to a website page.

For Example: I would like to read a file that has the contents of 'hello world!!!'and then using jQuery put it to a div.

Answer 1

NodeJS is not a web server.

However, you can easily add dependencies to provide such capabilities.

eg express , koa , or hapi .

So far, you've got [ something like ]:

const fs = require('fs');
fs.readFile('data.json', (e, data) => {
    if (e) throw e;
    console.log(data);
});

You could use express as follows ( note: if you have not already run npm init , do so and provide sensible defaults ):

npm init 
npm install --save express

Then, create a file, app.js , to serve you're data, eg:

const fs = require('fs');
const express = require('express');
const app = express();

app.use('/', (req, res) => {
    if (e) throw e;

    // **modify your existing code here**
    fs.readFile('data.json', (e, data) => {
        if (e) throw e;
        res.send(data);
    });
});

app.listen(5555);

Launch your node "web server":

node app.js

Finally , point your browser to:

http://localhost:5555/

Answer 2

If you are using jquery and express just build an endpoint on your express server that serves the contents of the text file.

your jquery:

$.getJSON("/text", function(data){
   <write code here to render contents of text file to the DOM>
})

your end point in node:

router.get("/text", function(req, res){
      fs.readFile(textFile, 'utf8', function(err, data) {
        if (err) throw err;
        return res.json(textFile);
      })
    })
})

Answer 3

As I understand your question you want to "render" the text on the client, not on the server. The easiest way to do this with jQuery is using $.ajax like this:

 const URL_TO_STATIC_TXT = 'https://cdn.rawgit.com/fabe/2a371ce28effb32fa1120f8d25225d37/raw/6d0bfebff1d0b52d72ed5ded4011a0bbff80d679/file.txt'; $.ajax({ url: URL_TO_STATIC_TXT }) .done(data => { $('body').text(data); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then you only need to host the static .txt files with Node.js, without even using fs . With Express you can achieve this with app.use :

app.use('/', express.static(__dirname + '/public'));

---

If you want to render the files on the server (using fs ) you can also look into countless templating libraries like pug .

Answer 4

I don't know what is the purpose of this, but you can use Express to start a simple web server that provide the content of your text file. Then, you just need to request this web server from your website page using jQuery.

Answer 5

 const URL_TO_STATIC_TXT = 'https://cdn.rawgit.com/fabe/2a371ce28effb32fa1120f8d25225d37/raw/6d0bfebff1d0b52d72ed5ded4011a0bbff80d679/file.txt'; $.ajax({ url: URL_TO_STATIC_TXT }) .done(data => { $('body').text(data); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>