在hapi框架里使用ajax提交表单数据,但是服务端接收到的数据是空对象。怎么办啊?

发布于 2022-09-02 21:00:19 字数 2325 浏览 20 评论 0

前端代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>page1</title>
    <meta charset='UTF-8'/>
</head>
<body>
    <form id='form'>
        <fieldset>
            <legend>people information</legend>
            <label for="name">name</label>
            <input type="text" id="name"/>
            <label for="type">type</label>
            <input type="text" id="type"/>
            <label for="camp">camp</label>
            <input type="text" id="camp"/>
        </fieldset>
    </form>
    <button id="commit">提交</button>
    <script type="text/javascript" src="/js/transdata2.js"></script>
</body>
</html>

前端js代码如下:

var commitBtn = document.querySelector('#commit');

commitBtn.addEventListener('click',function(){
    var form = document.querySelector('#form');
    var vForm = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 ){
            if(xhr.status == 200){
                console.log(xhr.response);
            } else {

            }
        } else {

        }
    }

    xhr.open('POST','http://localhost:3000/commit');
    xhr.send(vForm);
},false)

后台代码如下:

'use strict';
const Hapi = require('hapi');
const server = new Hapi.Server();
server.connection({port:3000});

server.start((err) => {
    if(err){
        throw(err);
    }
    console.log('Server running at:',server.info.uri);
});

server.register(require('inert'),(err) => {
    if (err){
        throw err;
    }

    server.route({
        method: 'GET',
        path: '/js/transdata2.js',
        handler:function(request,reply){
            reply.file('./js/transdata2.js');
        }
    })

    server.route({
        method:'GET',
        path:'/page1',
        handler:function(request,reply){
            reply.file('./view/page1.html');
        }
    })
})

server.route({
    method:'POST',
    path:'/commit',
    handler:function(request,reply){
        console.log(request.payload);
        return reply('ok');
    }
})

但是后端接收到的却是空对象。
是不是使用request.payload不对?
到底怎么解决啊?请指点!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你在看孤独的风景 2022-09-09 21:00:19

有人吗?有人吗?有人吗?

晒暮凉 2022-09-09 21:00:19

有的有的。你这个问题呢,看样子是 ajax没有发送过来。
你用的post请求, 但是ajax书写post请求的时候需要声明一下头;
参考下 http://www.w3school.com.cn/aj...

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文