单击html按钮时无法调用node.js?

时间:2019-08-19 07:57:17

标签: html node.js ajax

我创建了一个包含2个按钮的html页面。当我单击这些按钮时,我想调用一个node.js文件。当前,当我单击此按钮时,没有任何反应。当我检查镀铬的页面时,显示了

  

无法加载资源:服务器的响应状态为404(未找到)

我已经使用命令<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="row"> <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1"> <p>Item 1</p> </div> <div class="col-4 master-advanced-left-tab" data-id="item2"> <p>Item 2</p> </div> <div class="col-4 master-advanced-left-tab" data-id="item3"> <p>Item 3</p> </div> </div> <div class="wrap"> <div class="item1 "> Show content from item 1 </div> <div class="item2 hide"> Show content from item 2 </div> <div class="item3 hide"> Show content from item 3 </div> </div>安装了express。我正在ubuntu上的apache2服务器上运行它。我已经将html和nodejs文件都复制到了npm install -g express目录中。

我已经使用了Express框架,并且正在使用ajax请求与nodejs文件进行通信。

web.html

var/www/html

node.js文件

<!DOCTYPE html> 
<html> 
<h3>Example of a Deploy And Decommission Button</h3> 
<body> 
<button onclick="myFunction()" >Deploy</button>
<button onclick="myFunction()">Decommission</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script >
function myFunction() {
  $.post("/createContainer").done(() => {
   console.log("container created")
  });
}
</script>        


</body> 
</html> 

如果需要对代码进行什么更改,我听说node.js将在其自己的节点服务器上运行,这使我想到了下一个问题,即如何在同一服务器上同时运行html页面和nodejs

我的意思是我对如何运行此应用程序感到非常困惑。请帮忙。

2 个答案:

答案 0 :(得分:-1)

如果您正在运行localhost,则需要完整的URL:

http://localhost:{port}/createContainer

答案 1 :(得分:-1)

首先,apache2和express.js是两个单独的服务器。因此,您可以同时使用它们两者,但是明智的选择是只选择其中之一。

在您的示例中,您将做两件事,提供您的html文件并将应用程序与端点连接。

在express.js中,您可以提供html文件。

无需运行任何apache2服务器,您就可以运行与express.js服务器一起使用的nodejs应用程序。

public / index.html

<!DOCTYPE html>
<html>
  <h3>Example of a Deploy And Decommission Button</h3>
  <body>
    <button onclick="myFunction()">Deploy</button>
    <button onclick="myFunction()">Decommission</button>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script>
      function myFunction() {
        $.post("/createContainer").done(data => {
          console.log("container created");
          console.log(data);
        });
      }
    </script>
  </body>
</html>

index.js

const express = require("express");
const app = express();
const process = require("child_process");
const path = require("path");

app.get("/", function(req, res) {
  res.sendFile(path.join(__dirname + "/public/index.html"));
});
app.post("/createContainer", (req, res) => {
  process.exec("kubectl apply -f tomcat.yaml", function(err, stdout, stderr) {
    if (err) {
      console.log("\n" + stderr);
      res.send(err);
    } else {
      console.log(stdout);
      res.send(stdout);
    }
  });
});
app.listen(8080, function() {
  console.log("Listening on port 8080!");
});

您需要运行您的应用程序

node src/index.js

您可以从https://codesandbox.io/s/happy-forest-4dvcy

进行检查