JSON.parse Неожиданный токен xmlhttprequest и node.js - PullRequest
Новая
       8

JSON.parse Неожиданный токен xmlhttprequest и node.js

0 голосов
/ 27 сентября 2018

Я пытаюсь отправить число из файла javascript на сервер node.js (с установленными модулями express и body-parser), выполнить небольшой расчет и вернуть результат, обновляя поле html.Я получаю следующую ошибку: Неожиданный токен 0 в JSON в позиции 0 , даже после удаления всех команд JSON.stringify и JSON.parse в коде.

Используются следующие файлы (с index.js в корневом каталоге / приложении):

index.js 

//////////////////// Module Initializations ////////////////////

var express = require("express");
var app = express();
var bodyParser = require("body-parser");

//////////////////// Backend Functions ////////////////////

function secret_calculation(num)
{
    var result = num * 5;    
    return result;
}

//////////////////// Running Server ////////////////////

app.use(express.static(__dirname + '/Static'));

app.get('/',function(req,res){
  res.sendFile('Static/app.html', {root : __dirname});
});

app.listen(3000);

console.log('\n\n -------- S E R V E R   R U N N I N G -------- \n\n');

//////////////////// Settings for Data Transfer ////////////////////

app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json());

app.use(function (req, res, next) {
    // to restrict api calls to the ones coming from your website
    res.append('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.append('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

//////////////////// AJAX Requests ////////////////////

app.post("/num", function(req, res) {
    var num = parseInt(JSON.parse(req.body));
    result = secret_calculation(num);
    res.send(JSON.stringify(result));
});

Static / client_server_comms.js 

function request_handler(theUrl, data, callback)
{
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            callback(JSON.parse(xmlHttp.responseText));
        }
    }

    xmlHttp.open('POST', theUrl, true); // true for asynchronous
    xmlHttp.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
    xmlHttp.send(JSON.stringify(data));
}

function secret_calculation_(num, ans)
{
    request_handler("/num", num, function(result) {ans.innerHTML = result;});
}

Static / app.js 

document.getElementById("button1").addEventListener("click", get_input);

function get_input()
{
    user_input = parseInt(document.getElementById("in_put").value);
    user_input = user_input || 0;
    ans = document.getElementById("answer");

    secret_calculation_(user_input, ans);
}

Static / app.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <input id="in_put" type="text" maxlength="3" size="5" oninput="this.value = this.value.replace(/[^0-9]/g, '');" >
    <span> x 5 = </span><span id="answer"></span>
    <br><br>
    <input type="button" id="button1" value="Calculate">

    <script src="app.js"></script>
    <script src="client_server_comms.js"></script>
  </body>
</html>

Похоже,проблема с форматом, который пытается проанализировать JSON (происходит между xmlhttprequest и app.post).Я применил решения от аналогичных проблем на стеке обмена, но без кубиков.

Ошибка: 

SyntaxError: Unexpected token 0 in JSON at position 0
    at JSON.parse (<anonymous>)
    at createStrictSyntaxError (/Users/Mick/Desktop/app/node_modules/body-parser/lib/types/json.js:158:10)
    at parse (/Users/Mick/Desktop/app/node_modules/body-parser/lib/types/json.js:83:15)
    at /Users/Mick/Desktop/app/node_modules/body-parser/lib/read.js:121:18
    at invokeCallback (/Users/Mick/Desktop/app/node_modules/raw-body/index.js:224:16)
    at done (/Users/Mick/Desktop/app/node_modules/raw-body/index.js:213:7)
    at IncomingMessage.onEnd (/Users/Mick/Desktop/app/node_modules/raw-body/index.js:273:7)
    at emitNone (events.js:106:13)
    at IncomingMessage.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)

1 Ответ

0 голосов
/ 27 сентября 2018

Похоже, вы не передаете данные JSON по запросу.Если ваш num = 5, то вы передаете JSON.stringify (5) как req.body, что не является допустимым JSON.

Пожалуйста, смотрите измененный код на стороне клиента: 

function request_handler(theUrl, data, callback)
    {
        var xmlHttp = new XMLHttpRequest();

        xmlHttp.onreadystatechange = function() { 
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                callback(JSON.parse(xmlHttp.responseText));
            }
        }

        xmlHttp.open('POST', theUrl, true); // true for asynchronous
        xmlHttp.setRequestHeader('Content-type', 'application/json;charset=UTF-8');
        //xmlHttp.send(JSON.stringify(data));
        xmlHttp.send(JSON.stringify({num: data}))

    }

    function secret_calculation_(num, ans)
    {
        request_handler("/num", num, function(data) {ans.innerHTML = data.result;});
    }

На стороне сервера внутри app.post ("/ num") используйте следующее: 

app.post("/num", function(req, res) {
    var data = validateJSON(req.body);
    var num = parseInt(data.num);
    result = secret_calculation(num);
    res.send(JSON.stringify({ result: result }));
});

Где validateJSON - это функция, которая может быть определена как: 

function validateJson(data){
    var jsonData;
    try {
        jsonData = JSON.parse(data);
    } catch (e) {
        console.log(e.message);
        jsonData = data;
    }
    return jsonData;
};
...