Hướng dẫn node js change html content - nút js thay đổi nội dung html

Bạn không thể sửa đổi từ phía nút theo cách mà tôi nghĩ rằng bạn đang cố gắng làm. Bạn có thể gửi lại phản hồi cho phía máy khách và trên phản hồi đó, bạn có thể kích hoạt một hàm [mà bạn có thể viết trong jQuery] sẽ thay đổi DOM và lưu những gì cần thay đổi trong bộ nhớ cục bộ ... Đây là một thí dụ ...

//server.js
router.post['/change',function[req,res]{

    // the message being sent back will be saved in a localSession variable
    // send back a couple list items to be added to the DOM
    res.send[{success: true, message: '
New list item number 1
New list item number 2
'}];
}];

Đây là mặt trước ...

//index.html
//body
Hello World
    

        
List item 1
         //li items with class change will be changed on button click
        
List item 2
        Trigger Change
    



   //if we have data stored in the session variable, then use the data to change the DOM text
    if[window.localStorage.permanentData]{
        $['li.change'].replaceWith[window.localStorage.permanentData];
    }

    //change DOM function
    function changeDom[]{
        //ajax call
         $.ajax[{
                  url: '//localhost:8080/change',
                  method:'POST',
                  data: {list: "some info"}
                }].done[function[data]{
                    //if we have a successful post request ... 
                    if[data.success]{
                        //change the DOM &
                        //set the data in local storage to persist upon page request
                        localStorage.setItem["permanentData", data.message];
                        var savedText = localStorage.getItem["permanentData"];
                        $['li.change'].replaceWith[savedText];

                        return;
                    }
                }].fail[function[]{
                   //do nothing ....
                    console.log['failed...'];
                    return;
                }];
        };

    //trigger change DOM  function
    $['.trigger'].click[function[]{
        changeDom[];
    }];

Trong bài viết này, bạn sẽ tìm hiểu về việc làm cho ứng dụng nút của mình phản hồi để nó sẽ tự động thay đổi nội dung HTML và cập nhật nó với nội dung mới được chèn vào bộ sưu tập. & NBSP;

Chúng tôi sẽ thiết lập một EJ phần mềm trung gian, EJ giúp dễ dàng gửi dữ liệu từ tệp máy chủ của bạn [App.js hoặc Server.js] đến một trang tĩnh [HTML]. Sau đó, chúng tôi sẽ sử dụng trình phân tích cú pháp cơ thể mà theo đó chúng tôi có thể nắm bắt các giá trị đầu vào của người dùng từ biểu mẫu và lưu trữ chúng trong một bộ sưu tập, sau đó chúng tôi sẽ gửi dữ liệu của bộ sưu tập đến trang tĩnh. Theo cách này, khi bất kỳ dữ liệu nào được chèn vào biểu mẫu thì nó sẽ chèn vào bộ sưu tập và tự động cập nhật nội dung HTML. & nbsp;

Cài đặt EJS: Xác định vị trí thư mục dự án gốc của bạn vào thiết bị đầu cuối và nhập lệnh Locate your root project directory into the terminal and type the command

npm install ejs

Đặt EJS làm công cụ xem:

app.set['view engine', 'ejs'];

Sắp xếp lại các thư mục của bạn: Cần phải đổi tên tệp của bạn từ .html thành .ejs để sử dụng EJ bên trong nó. Sau đó, bạn phải di chuyển mỗi tệp .ejs trong thư mục chế độ xem bên trong thư mục gốc của bạn.It is required to rename your file from .html to .ejs for using EJS inside it. Then you have to move every single .ejs file in the views directory inside your root directory.

Sử dụng biến EJS: Bên trong tệp .ejs được cập nhật của bạn, bạn phải sử dụng các biến EJS để nhận giá trị từ tệp máy chủ của bạn.Inside your updated .ejs file, you have to use EJS Variables to receive values from your server file.

HTML