Question

以下代码应该在按钮单击时从客户端向nodejs服务器发送数据。单击提交按钮后，将调用路径，但数据似乎没有被发送到服务器。问题是：如何从客户端向服务器发送数据以及如何在节点js端检索数据？

index.ejs：

<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() {
        $("#myButton").bind('click', function() {

          event.preventDefault();

          var data = $('#myEditText').val();
          $.post('/yolo', {textBoxValue: data}, function(callback) {
            document.write("button clicked calling yolo script");
            alert("yolo");
          });

          alert("Button clicked. This button was bind/onClickListener to Jquery: "+data);
        });
      });

    </script>
    <form id = "myForm" action = "http://localhost:3000/yolo" method="post"> <!--action = "http://127.0.0.1/index.js" is for telling the browser which script file will handle the data from this form upon submission -->
      Enter Url: <input id="myEditText" type="text" name="urlEditText"/>
      <br />
      <br />
      Shortened Url:<%= shortenedUrl %> <!--// shortened url passed from the server -->
      <br />
      <br />
      <button id="myButton" type="button" value="Submit" onclick="fetchData()"> Submit </button>
    </form>

index.js：

router.post('/yolo', function(req, res, next) {

    req.on('textBoxValue', function(data) {
        console.log("data recieved: "+ data);
    });

    console.log("yolo post called: "+ req.data + " fromBody: "+ req.body.urlEditText);
    res.render('index', { title: 'NewTitle', shortenedUrl: shortenedUrl});
    console.log("hello inside index.js method 1");
});

Answer 1

首先，请检查浏览器的控制台网络标签，查看发送的内容：它可能是url-form-encoded，这不是您想要的。您可以使用jQuery将其作为JSON发送：

$.ajax({
  type: 'POST',
  url: '/yolo',
  data: JSON.stringify({textBoxValue: data}),
  contentType: 'applicatio/json'
})

然后确保在服务器端（ref）使用正文解析器，例如body-parser：

<强> req.body

包含请求正文中提交的键值对数据。默认情况下，它是未定义的，并在您使用正文解析中间件[...]
时填充

代码将是：

var bodyParser = require('body-parser');

var jsonParser = bodyParser.json();

router.post('/yolo', jsonParser, function(req, res, next) {
    // here req.body should be the object {textBoxValue: data}
});

Answer 2

首先：req和res对象是node.js和express / koa中的流。关于流的好东西：https://github.com/substack/stream-handbook

所以，你需要解析＆＃34;你的数据首先是身体解析器。然后在req对象中，您将在req.body.{key: value, keyn: valuen}

中找到帖子数据

同样textBoxValue事件将被更新，因为可写流中没有此类事件。但你总是可以创建事件发射器并发射自己的事件。

在服务器上检索POST数据

2 个答案: