javascript - 为什么我得到两个输出，其中之一未定义？

Question

我制作了一个按钮来使用 Jquery 提交一些 POST 数据。它只是通过 json 发送一个“name”:“kevin”。

$(document).ready(function() {
    $('#clickMe').on('click', function() {
        var data = {};
        data.name="kevin";
        $.ajax({
            type: "POST",
            data: JSON.stringify(data),
            contentType: 'application/json'
        });
    });
});

我的服务器接受这个并将输出泵入console.log

const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var port = 8080;


app.use(express.static('public'));
app.use(bodyParser.json());

app.post('/', (req, res) => {

    console.log(req.body.name);
});


app.listen(port);
console.log('Listening on http://localhost:' + port)

我的问题是 console.log(req.body.name) 输出两件事而不是一件......我不确定为什么。我的控制台输出如下所示:

Kevin 
Undefined

Answer 1

您展示的代码很好。您需要提供 HTML 部分才能确定。

您可能获得此结果的原因之一是拥有这种代码:

<form action='/' method="post">
  <button id="clickMe" type="submit">submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('#clickMe').on('click', function() {
      var data = {};
      data.name = "kevin";
      $.ajax({
        type: "POST",
        data: JSON.stringify(data),
        contentType: 'application/json'
      });
    });
  });
</script>

这里，将提交 AJAX 请求(带有 data.name = "kevin" )，然后表单也将被提交(没有 data.name 属性，因此 undefined 值)。

这种情况的解决方案是阻止表单以 event.preventDefault(); 提交。或return false; :

$(document).ready(function() {
  $('#clickMe').on('click', function(e) {
    e.preventDefault();
    var data = {};
    data.name = "kevin";
    $.ajax({
      type: "POST",
      data: JSON.stringify(data),
      contentType: 'application/json'
    });
    // OR
    // return false;
  });
});

您也可以简单地删除表单部分并只使用按钮:<button id="clickMe">click here</button> 。这里表单不会提交，所以不需要event.preventDefault();或return false; .

您也可以通过添加输入并删除 JS 部分来使用表单，但这只是一个经典的表单提交。