使用NODE.JS和EJS更新HTML頁面的一部分

我有以下快速應用程序，它只呈現sample.ejs頁面。當我按下按鈕時，附加的腳本將div文本更改爲「這是J QUERY。使用res.render（）;每次我點擊按鈕，然後重新加載我不想要的頁面，那麼有沒有一種方法可以實現這一點，而無需重新加載頁面，只更新頁面的一部分？我已經搜索堆棧溢出和Web，但不能得到一個合適的答案也許我只是感到無法理解。我知道這是要問一個很基本的東西。使用NODE.JS和EJS更新HTML頁面的一部分

APP.js

var express = require('express'); 
var app = express(); 
app.use(express.static('public')); 
app.use(express.static('./src/views')); 
app.set('views', './src/views'); 
app.set('view engine' , 'ejs'); 

app.listen(3000 , (err)=>{console.log('Listening')}); 

app.get('/' , function(req , res) { 
    res.render('sample' , {result_from_database: res.body}); 
});

個

sample.ejs

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Sample HTML File</title> 
</head> 

<body> 
    <div id="holder"> 
     WELCOME 
    </div> 
    <form> 
     <button type="button" id="HButton"> HELLO </button> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 
     var form = $("#holder"); 

     $("#HButton").on("click", function() { 
      form.html("THIS IS FROM J QUERY"); 
     }); 
    }); 
</script> 

<script src="/lib/jquery/dist/jquery.js"></script> 

</html>

現在，這就是我想要做的

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Sample HTML File</title> 
</head> 

<body> 
    <div id="holder"> 
     <%= result_from_database %> 
    </div> 
    <form> 
     <button type="button" id="HButton"> HELLO </button> 
    </form> 
</body> 

<script> 
    $(document).ready(function() { 
     var my_div = $("#holder"); 
     $("#HButton").on("click", function() { 

      /* Tell app.js that I clicked a button and then app.js 
      query the database and using ejs or something else update the 
      my_div inner html with the database result without 
      reloading page */ 
     }); 
    }); 
</script> 

<script src="/lib/jquery/dist/jquery.js"></script> 

</html>

注：我不問如何查詢數據庫

-Thanks

來源

2017-04-20 Ahmed Jamil

你在問什麼需要客戶端JavaScript，通常稱爲Ajax。如果你搜索這個名字，有很多教程。 – Quentin

你必須在node.js中定義一個api端點，以json格式檢索所需的信息。然後從前端開始，您可以使用JQuery，Angular或React調用api並在前端顯示信息。 –

你必須定義和en dpoint在後端返回的信息要顯示：

app.js

var express = require('express'); 
var app = express(); 
app.use(express.static('public')); 
app.use(express.static('./src/views')); 
app.set('views', './src/views'); 
app.set('view engine' , 'ejs'); 

app.listen(3000 , (err)=>{console.log('Listening')}); 

app.get('/' , function(req , res) { 
    res.render('sample' , {result_from_database: res.body}); 
}); 

app.get('/api/books', function(req, res) { 
    res.json({ 
     message: 'Your database information' 
    }); 
});

然後在前端你需要調用的API端點，如：

sample.ejs

<script> 
    $(document).ready(function() { 
     var my_div = $("#holder"); 
     $("#HButton").on("click", function() { 

      $.ajax({ 
      url: "/api/books" 
      }) 
      .done(function(data) { 
      console.log("Sample of data:", data); 
      $('#holder').html(data.message); 
      }); 
     }); 
    }); 
</script>

你可以找到與jqu Ajax調用的更多信息ery here。

但是，我建議你使用任何框架像角或反應，以使它更容易呈現您的HTML中的數據，否則你將不得不寫很多使用jQuery的代碼。

來源

2017-04-20 15:30:09

感謝看起來像我所需要的，以及我看到什麼ejs可以做什麼後，試圖避免jQuery的東西。你知道直接從節點到你的html頁面，並且所有的javascript邏輯都在我想要的地方。無論如何，你可以向我推薦任何特定的鏈接或關鍵字，我應該通過它來搜索Angular或React。 –

你可以在這裏查看AngularJS 1.x https://docs.angularjs.org/tutorial，對於這裏有一個很好的教程https://facebook.github.io/react/tutorial/tutorial.html，Angular 4是如果你是java腳本的新手，那麼稍微複雜一點。 –

謝謝你的時間，我會檢查這些鏈接。 –

使用NODE.JS和EJS更新HTML頁面的一部分

回答

相關問題