Question

浏览器JS

'use strict';

window.onload = () => {


    let form = document.getElementById('sign_up_form'),
        username = form.elements[0],
        password = form.elements[1],
        confirm = form.elements[2],
        email = form.elements[3],
        errors = document.getElementById('sign_up_errors');

    username.addEventListener('change', (e) => {
        let xhr = new XMLHttpRequest();
            xhr.open('GET', '/validate_username');
            xhr.send();

            xhr.onreadystatechange = () => {
                console.log(xhr.readyState);
                if (xhr.readyState === 4) {
                    console.log(xhr.status);
                    if (xhr.status === 200) {
                        console.log('AJAX SUCCESS');
                    };
                };
            };
    });

    confirm.addEventListener('change', (e) => {
        if (password.value != confirm.value) {
            errors.children[1].innerHTML = 'Passwords do not match.';
        } else {
            errors.children[1].innerHTML = '';
        };
    });

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        let form_data = {
            username: username.value,
            password: password.value,
            confirm: confirm.value,
            email: email.value,
        };

        let xhr = new XMLHttpRequest();
            xhr.open('POST', '/validate_signup');
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.send(JSON.stringify(form_data));
    });
}

服务器

'use strict';

let app = require('koa')(),
    serve = require('koa-static'),
    router = require('koa-router')(),
    parse = require('koa-bodyparser'),
    mongo = require('koa-mongo'),
    fs = require('co-fs');

app.use(serve(__dirname + '/public'));

app.use(mongo({
    uri: ******,
    max: 100,
    min: 1,
    timeout: 30000,
    log: false
}));


app.use(parse());
app.use(router.routes());

router.post('/validate_username', function *(next) {
    console.log('username:');
    console.log(this.request.body);
});

router.post('/validate_signup', function *(next) {
    console.log('signup:');
    console.log(this.request.body);
    this.mongo.collection('users').findOne({'username': this.request.body.username}, (err, doc) => {
        console.log(doc);
    });
});

app.listen(5000);

AJAX＆＃39; POST＆＃39;请求将form_data提供给服务器，我可以检查数据库但是控制台404错误。 AJAX＆＃39; GET＆＃39;请求只在实现readyState 4后抛出404错误。我认为我正在使用错误的路由或在我的AJAX请求中遗漏了一些内容但我是Koa.js的新手并且几乎都是绿色的，所以任何帮助都将受到赞赏。

Answer 1

JS：

'use strict';

window.onload = () => {


    let form = document.getElementById('sign_up_form'),
        username = form.elements[0],
        password = form.elements[1],
        confirm = form.elements[2],
        email = form.elements[3],
        errors = document.getElementById('sign_up_errors');

    username.addEventListener('input', (e) => {
        let data = {username: username.value};

        let xhr = new XMLHttpRequest();
            xhr.open('POST', '/sign_up/username');
            xhr.setRequestHeader('Content-type', 'application/json');
            xhr.send(JSON.stringify(data));
            xhr.onreadystatechange = () => {
                console.log(xhr.readyState);
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (JSON.parse(xhr.responseText).username) {
                        console.log('unavailable');
                    } else {
                        console.log('available');
                    };                    
                };
            };
    });
};

SERVER：

'use strict';

let router = require('koa-router')({
    prefix: '/sign_up'
});

router.post('/username', function *(next) {
    console.log('Checking username...');

    yield new Promise((resolve, reject) => {
        this.mongo.collection('users').findOne({'username': this.request.body.username}, (err, doc) => {
            if (doc) {resolve(doc)} 
            else {reject()};
        });
    }).then((doc) => {
        if (doc) {
            console.log('Promise: ' + doc);
            this.body = {username: false};
        };
    }).catch(() => {
        console.log('Promise rejected.');
        this.body = {username: true};
    });
});


module.exports = router;

带有Node和Koa的AJAX 404

1 个答案: