0

Эта ошибка возникает, когда перемещаю код 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");
3
  • Покажите, пожалуйста, код.
    – ymd
    23 авг 2018 в 20:40
  • 1
    ну раз вы указали в тегах webstorm, то дело явно в нем
    – ThisMan
    23 авг 2018 в 20:42
  • когда jquery в html файле, все нормально работает.. 23 авг 2018 в 20:47

2 ответа 2

1

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

Update

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

4
  • Igor, нету там тегов.... прямой на 1-ой линии замечает ошибку.. 23 авг 2018 в 20:54
  • node_ajax_post_jquery.js:1 Uncaught SyntaxError: Unexpected token < 23 авг 2018 в 20:55
  • Поменял на <script src="localhost:3000/node_ajax_jquery.js"></script>, тоже не сработало..... Какие варианты еще могут быть?? 24 авг 2018 в 8:13
  • @HovhannesShaxulyan Наберите в адресной строке браузера url, ведущий к js файлу, и посмотрите, что придет.
    – user176262
    24 авг 2018 в 12:58
0

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

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/');
7
  • Использовал этот код, теперь когда нажимаю сабмит в регистрации или в логине, код работает + загружается какой-то текстовый пустой файл... 17 сен 2018 в 16:15
  • @HovhannesShaxulyan, Обрати внимание, что в примере кода не учитывается метод с которым осуществляется запрос. То есть на любой запрос идет попытка отдать подходящий файл. Если по расширению запрашиваемого файла не удалось распознать mime-type, устанавливается 'application/octet-stream' который должен просто скачиваться как результат. Скачиваемый файл точно пустой?
    – Grundy
    17 сен 2018 в 16:34
  • @HovhannesShaxulyan, по сути тебе этот код нужно вынести в функцию вроде: loadStaticFile и вызывать ее когда ты хочешь загрузить статический файл, а не произвести какие-то действия, типа обработки формы.
    – Grundy
    17 сен 2018 в 16:35
  • А как нужно прочесть эти файлы, чтобы еще и действия можно было произвести??? 17 сен 2018 в 17:48
  • @HovhannesShaxulyan, их просто не нужно читать, если это не нужно :-) у тебя же код в вопросе обрабатывал действие (POST) вот по такому же принципу.
    – Grundy
    17 сен 2018 в 17:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.