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

发布于 2022-09-02 21:00:19 字数 2325 浏览 16 评论 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不对？
到底怎么解决啊？请指点！

分享到QQ

分享到微博

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

发布评论

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

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

有人吗？有人吗？有人吗？

回复收藏 0

晒暮凉 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");

回复收藏 0

~没有更多了~