Uncaught SyntaxError: Unexpected token < Что это за ошибка?

231

17 ноября 2018, 23:40

Эта ошибка возникает, когда перемещаю код jquery (отправляет данные на сервер node js) в отделный файл... Когда скрипт в одном файле с HTML, такой ошибки нету..... Почему так происходит???

html()

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8" />
    <title>NODE AJAX LEARNING</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="node_ajax_post_jquery.js"></script>
    </head>
<body>
<form action="#">
    <input type="text" name="name" class="nm required" /></br>
    <input type="text" name="surname" class="srnm required" /></br>
    <input type="text" name="email" class="mail required" /></br>
    <input type="submit" class="sbmt" value="send" />
</form>
</body>
</html>

jquery()

$(document).ready(function() {
    let info = {};
    $("form").submit(function(event) {
        $(".required").each(function(i) {
            if ($(this).val().length < 1) {
                alert(i);
                event.preventDefault();
            }
            else {
                let key = "key" + i;
                info[key] = $(this).val();
            }
        });
        var infojs = JSON.stringify(info);
        $.ajax({
            url: "http://localhost:3001",
            type: "POST",
            data: infojs,
            success: function(data) {
                console.log(data);
            },
            error: function(xhr, status, error) {
                console.log("Error with server connecting");
            }
        });
    });
})

node js()

const http = require("http");
const fs = require("fs");

const server = http.createServer();
server.on("request", (req, res) => {
    if (req.method == "POST") {
        res.writeHead(200, {"Content-Type":"text/plain"});
        req.on("data", (chunk) => {
            console.log(JSON.parse(chunk));
            res.end("Data recieved")
        })
    }
    else {
        fs.readFile("index_ajax_post.html", (err, data) => {
            if (err) throw err;
            res.writeHead(200, {"Content-Type":"text/html"});
            res.write(data);
            res.end();
        })
    }
}).listen(3001);
console.log("Server running on 3001");

Answer 1

На сервере задан обработчик запросов

server.on("request", (req, res) => {

он срабатывается при любом запросе.

Что он делает?

Если пришел POST запрос - получает данные, во всех остальных случаях возвращает содержимое файла index_ajax_post.html

Поэтому в случае

<script src="node_ajax_post_jquery.js"></script>

В ответ получается содержимое html файла, и происходит ошибка при попытке выполнить его как javascript.

В качестве решения нужно добавить проверки какие именно файлы запрашиваются, по аналогии с примером:

var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer(function (request, response) {
    console.log('request ', request.url);
    var filePath = '.' + request.url;
    if (filePath == './') {
        filePath = './index.html';
    }
    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.json': 'application/json',
        '.png': 'image/png',
        '.jpg': 'image/jpg',
        '.gif': 'image/gif',
        '.wav': 'audio/wav',
        '.mp4': 'video/mp4',
        '.woff': 'application/font-woff',
        '.ttf': 'application/font-ttf',
        '.eot': 'application/vnd.ms-fontobject',
        '.otf': 'application/font-otf',
        '.svg': 'application/image/svg+xml'
    };
    var contentType = mimeTypes[extname] || 'application/octet-stream';
    fs.readFile(filePath, function(error, content) {
        if (error) {
            if(error.code == 'ENOENT') {
                fs.readFile('./404.html', function(error, content) {
                    response.writeHead(200, { 'Content-Type': contentType });
                    response.end(content, 'utf-8');
                });
            }
            else {
                response.writeHead(500);
                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
                response.end();
            }
        }
        else {
            response.writeHead(200, { 'Content-Type': contentType });
            response.end(content, 'utf-8');
        }
    });
}).listen(8125);
console.log('Server running at http://127.0.0.1:8125/');

Answer 2

Вы поместили в js файл вместе с кодом также и тэги <script> и </script>. Уберите их оттуда.

Update

Хорошо. Неправильно указан путь к файлу node_ajax_post_jquery.js, сервер возвращает html страницу для ошибки "404 Not Found", которая содержит тэги, то есть самый первый символ - "<". Наберите в адресной строке браузера url, ведущий к js файлу, и посмотрите, что придет.