Question

这是一个node / express / pug项目。前端呈现良好，但使用vanilla ajax发送一个空对象。

基本上，它是带有事件监听器的单个输入字段。当字段提交（更改）时，它会获取字段数据，将其发送给表达。快递路由器此时不执行任何操作，只需拉出已发送的数据（req.body）并以json格式将其发回。

帕格模板

block content
  div.container
    div#enter.row
      input#entry.twelve.columns.form-control(type='text', placeholder='pste yr bkmk' name='bkmk')
    hr
    div#show.row

渲染html

<div class="container">
    <div class="row" id="enter">
        <input class="twelve columns form-control" id="entry" type="text" placeholder="pste yr bkmk" name="bkmk">
        <button type="submit"></button>
    </div>
    <hr>
    <div class="row" id="show"></div>
</div>
<script src="/js/script.js"></script>

JS

const ENTRY = document.getElementById("entry")
const SHOW = document.querySelector("div#show")

ENTRY.addEventListener("change", function () {
    addbkmk(this.value);
})

function addbkmk(incoming) {
    let XHR = new XMLHttpRequest();
    console.log(`incoming: ${incoming}`);             // COMMENT ONE
    XHR.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            ENTRY.value = ''
            let htmlP = document.createElement('p'); 
            htmlP.appendChild(document.createTextNode(this.responseText));
            SHOW.appendChild(htmlP);
        }
    };
    XHR.open("POST", "/", true);
    XHR.send({"incoming": incoming});
    console.log(SHOW.children.length);
}

表达router.post

router.post('/', function(req, res, next) {
  console.log(`req.body: ${req.body}`);               // COMMENT TWO
  res.status(200).json(req.body);
});

上述源中的

COMMENT ONE显示输入的文本。 COMMENT TWO显示一个空对象。

缺少什么？为什么不发送数据

HTML AJAX将空对象发送到后端

0 个答案: