如何在JavaScript中生成URL

时间:2019-07-05 03:21:14

标签: javascript html node.js express bootstrap-4

我想知道如何在javascript中为不同语言生成url。

服务器将json数据发送到前端,我具有头文件和帮助程序函数以在javascript中生成url。

如何在重定向功能中使用服务器发送对象作为参数并以url形式生成

www.xyx.com/en/lian-xi-wo-men 
www.xyz.com/en/guan-yu-wo-men
server.js
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
var obj ={
"contact" : "lian-xi-wo-men", 
"url" : {"aboutus" : "guan-yu-wo-men"}
}
       res.render('index.ejs',{lang: JSON.stringify(obj)} );
})

tried <a class="nav-link" href="/<%= lang.url.aboutus  %>">About Us</a> // getting error as aboutus not defined.

header.ejs

 <a class="nav-link" href="javascript:" onclick="redirect('about-us')">About Us</a>
<a class="nav-link" href="javascript:" onclick="redirect('contact')">Contact Us</a>


helper.js
function redirect(path){
    var urlpath = window.location.origin+"/"+en+"/"+path;
    window.location.href = urlpath;
}

1 个答案:

答案 0 :(得分:0)

我认为您正在完全解决问题。您根本不需要javascript。只需使用标签href执行所需的操作

server.js
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
var obj ={
"contact" : "lian-xi-wo-men", 
"url" : {"aboutus" : "guan-yu-wo-men"}
}
       res.render('index.ejs',{lang: JSON.stringify(obj)} );
})


header.ejs
// tried this not working
<a class="nav-link" href="/en/<%= lang.url.aboutus %>">About Us</a> //not working
//
<a class="nav-link" href="/en/<%= aboutus %>">About Us</a>
<a class="nav-link" href="/en/<%= contact %>">Contact Us</a>


如果您确实要传递服务器端对象。这是常用的方法。

  1. 通过将服务器端变量/对象附加到隐藏的输入值上,将其嵌入HTML中。另外,别忘了对其进行字符串化。

  2. 在您的javascript中,获取该输入值,将其解析回一个对象,现在您就可以在javascript代码中使用它了!

<html>
  <input id="lang-input" type="hidden" value="<%= JSON.stringify(lang) %>">

  <!-- Include JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>

    // wait for HTML to fully load
    $(function() {
      // grab lang variable
      var lang = JSON.parse($('#lang-input').val());

      // now you have lang object and can do whatver you want!
    });
  </script>
</html>