Question

我是node.js的新手，我试图为用户创建一种简单的方法将数据输入到html表单中，然后在点击提交时将数据传递给node.js脚本。 node.js脚本是一个后期脚本，它接收用户输入的数据，然后发布到API并从API获取JSON返回。我试图将返回的JSON打印回html页面。你如何以干净简单的方式做到这一点？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Commute | Ad-hoc</title>
      <link rel="stylesheet" href="css/style.css">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

  </head>

  <body>

      <div class="container cf">

      <div class="container cf">
  <div>
     <h1>Manual Query</h1>
    <label>Mode</label>
    <select id="modes">
      <option value="driving">Driving</option>
           <option value="walking">Walking</option>
           <option value="cycling">Cycling</option>
      </select>
    <label>Latitude Origin</label>
    <input type="text" name="latitude_origin" id="latitude_origin" value="37.791871">
    <label>Longitude Origin</label>
    <input type="text" name="longitude_origin" id="longitude_origin" value = "-122.396742">
    <label>Latitude Destination</label>
    <input type="text" name="latitude_dest" id="latitude_dest" value = "37.782461">
    <label>Longitude Destination</label>
    <input type="text" name="longitude_dest" id="longitude_dest" value = "-122.454807">
    <button id="singleQuery" class="singleQuery" input type="default small">Run</button>
  </div>
  <div>
    <h1>Multi-Query (.tsv)</h1>
    <label>Upload</label>
    <input type="file" name="pic" id="laserPrinters">
    <button id="testLaser" class="default small" input type="default small">Run</button>
  </div>
  <div>
    <h1>Result</h1>
    <textarea rows="4" cols="50">  </textarea>
  </body>
</html>


<script type="text/javascript">

var mode = $("#modes").val();
var latitude_origin = $("#latitude_origin").val();
var longitude_origin = $("#longitude_origin").val();
var latitude_dest = $("#latitude_dest").val();
var longitude_dest = $("#longitude_dest").val();

</script>

My Node.JS帖子脚本：

var request = require("request");

var options = { method: 'POST',
  url: 'http://blah:8000/blah/blah/blah/blah/[latitude_origin]/[longitude_origin]/',
  headers:
   { 'postman-token': 'blah',
     'cache-control': 'no-cache' },
  body: '{"query1":[latitude_dest,longitude_dest]}' };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

Answer 1

首先，您必须设置服务器以收听您将发送到node.js web api的请求。

我真的很乐意推荐你使用express.js。它是一个非常强大的Web服务器。

了解更多： https://expressjs.com/

我很快就会为你写一些例子。

希望它对你有所帮助。

更新1

看看MEAN Stack
https://github.com/meanjs/mean

更新2

以下是一些例子：
https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
https://developers.openshift.com/languages/nodejs/example-meanstack.html

将Node.JS连接到HTML表单

1 个答案: