更新html值,无需重新加载页面
如何更新ejs对象而不重新加载整个页面? 我正在从服务器通过jquery获取数据,但是我不知道如何更新从ejs模板中的Express
到NewTitle
title
对象。 请注意,如果有人知道一个好的资源可以帮助快速Nodejs的初学者,请提一下。
index.ejs:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1 id="pageTitle"><%= title %></h1> <p>Welcome to <%= title %></p> <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $(document).ready(function() { $("#myButton").bind('click', function() { event.preventDefault(); var data = $('#myEditText').val(); var result = $.post('/yolo', {textBoxValue: data}, function(callback) { alert("data: "+ callback.title); $(document).ready(function(){ title = callback.title; }); }); }); }); </script> </body> </html>
index.js:
router.post('/yolo', jsonParser, function(req, res, next) { res.send('index', { title: 'NewTitle'}) console.log("hello inside index.js method 1"); });
你不能通过Jquery更新Ejsvariables,你应该使用这样的东西:
HTML
<p>Welcome to <span class="title"><%= title %></span></p>
JS:
[...] var result = $.post('/yolo', { textBoxValue: data }, function(callback) { alert("data: " + callback.title); $(document).ready(function() { $('.title').html(callback.title); }); }); [...]
你必须在Node.js中使用res.json({title: 'NewTitle'})
,而不是res.send()