如何使用node.js更改前端HTML

所以我想从我的node.js后端对我的前端html文件进行更改。 我会怎么做？ （任何build议与例子将不胜感激）

这是我想要改变它的地方：

router.post('/change', function(req, res){ console.log(req.body.list); //modify html DOM here!! //preferably using jQuery }) 

Answer 1

你不能以我认为你正在尝试的方式从节点一方进行修改。 你可以发回一个响应到客户端，在这个响应上，你可以触发一个函数（你可以用JQuery编写）来改变DOM并保存需要在本地存储中改变的东西…这里是一个例子…

 //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: '<li>New list item number 1</li><li>New list item number 2</li>'}); }); 

这是前端…

 //index.html //body <h1>Hello World</h1> <ul> <li>List item 1</li> //li items with class change will be changed on button click <li class='change'>List item 2</li> <button class="trigger">Trigger Change</button> </ul> <script> //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: 'http://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(); }); </script>