Не подскажете почему сервер не возвращает на запрос страницу с формой ?

@Kostyshyn · Регистрация: 09.12.2018

Студворк — интернет-сервис помощи студентам

PHP/HTML

<html>
<head>
<title>Ajax - Node</title>
<style>
.error {
    background-color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
 
 
    <h1>Ajax Get method</h1>
    <form>
        <label>Name</label><br> <input type="text" id="userNameGet"><br>
        <label>Age</label><br> <input type="text" id="userAgeGet"><br>
        <label>Address</label><br> <input type="text" id="userAddressGet"><br>
        <br> <input id="getButt" disabled type="button" value="Send by Get"
            onclick="sendDataByGetMethod()">
 
    </form>
 
    <br>
 
    <h1>Ajax Post method</h1>
    <form>
        <label>Name</label><br> <input type="text" id="userNamePost"><br>
        <label>Age</label><br> <input type="text" id="userAgePost"><br>
        <label>Address</label><br> <input type="text" id="userAddressPost"><br>
        <br> <input id="postButt" disabled type="button" value="send by Post"
            onclick="sendDataByPostMethod()">
    </form>
 
    <br>
    <script>
function sendDataByGetMethod() {
    
    var userData = {
        userName:document.getElementById('userNameGet').value,  
        userAge:document.getElementById('userAgeGet').value,
        userAddress:document.getElementById('userAddressGet').value
    };
    
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/userGet?userName="+userData.userName+"&userAge="+userData.userAge+"&userAddress="+userData.userAddress);
    xhr.setRequestHeader("Content-type","application/json");
    xhr.send();
}
function sendDataByPostMethod() {
    var userData = {
            userName:document.getElementById('userNamePost').value, 
            userAge:document.getElementById('userAgePost').value,
            userAddress:document.getElementById('userAddressPost').value
        };
        
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/userPost");
        xhr.setRequestHeader("Content-type","application/json");
        xhr.send(JSON.stringify(userData));
}
userAgeGet.onblur = function() {
    if(this.value>100||this.value<1||isNaN(this.value)){    
        this.classList.add('error');
        alert("wrong age input");
        document.getElementById("getButt").disabled = true;
    }else{
        this.classList.remove('error'); 
        document.getElementById("getButt").disabled = false;
    }
}
userAgePost.onblur = function() {
    if(this.value>100||this.value<1||isNaN(this.value)){    
        this.classList.add('error');
        alert("wrong age input");
        document.getElementById("postButt").disabled = true;
    }else{
        this.classList.remove('error'); 
        document.getElementById("postButt").disabled = false;
    }
}
</script>
 
</body>
</html>

Javascript

var express = require("express");
var bodyParser = require("body-parser");
 
var server = express();
var jsonParser = bodyParser.json();
 
server.use(express.static(__dirname));
server.use(jsonParser);
 
server.get("/", function(request, response) {
    console.log('Start page is running');
    response.send("<h1>Welcome to the lesson regarding AJAX</h1>");
});
 
server.get("/userGet", function(request, response) {
    console.log(request.query);
    var obj = request.query;
    obj.userName += "ValidatedByGET";
    obj.userAge += "ValidatedByGET";
    obj.userAddress +="ValidatedByGET";
    response.send("You have successfully used Get method : "+ JSON.stringify(request.query));
});
 
server.post("/userPost", function(request, response) {
    console.log(request.body);
    var obj = request.body;
    obj.userName += "ValidatedByPOST";
    obj.userAge += "ValidatedByPOST";
    obj.userAddress +="ValidatedByPOST";
    response.send("You have successfully used Post method : "+ JSON.stringify(request.body));
});
 
 
server.listen(3000);

@kidASM · 25.02.2019, 19:00

Вот тебе рабочая болванка на основе твоих файлов. Но ещё нужно много чего добавлять для нормальное работы приложения. Такая поделка в продакшине не продержится и часа. public.zip.
P.S. Для запуска приложения, в папке с файлами (где package.json) в командной строке/терминале выполни: npm install; npm start;

@Kostyshyn · 01.03.2019, 21:58 **[ТС]**

Спасибо за помощь. но почемуто кнопка "Send by Get" не активна.
(За русский извините, сам из Украины)

@kidASM · 02.03.2019, 12:53

Сообщение от Kostyshyn

Спасибо за помощь. но почемуто кнопка "Send by Get" не активна.

Исправил проблему с кнопкой. testApp.zip
По поводу HTTP методов. Технически можно использовать любой из ниже перечисленных (если уложиться в ограничения по длине строки). Но на практике рекомендуется их использовать так:
GET - Метод GET запрашивает ресурсы с сервера (страница, файл (картинка, видео, т.д.и т.п.)).
POST - Используется для отправки данных на сервер (текст, картинки, ...). Сервер может вернуть ответ браузеру, а может и нет, зависть от реализации сервера.
Больше можно узнать здесь.
И ещё. Все эти методы - это условное разделение, так как по-факту на сервере реализация каждого из методов (роута) зависит от задачи и программиста.

@Kostyshyn · 02.03.2019, 12:54 **[ТС]**

Искренне благодарю !

@kidASM 364 / 263 / 104 Регистрация: 28.08.2013 Сообщений: 620
	25.02.2019, 19:00	2
	Вот тебе рабочая болванка на основе твоих файлов. Но ещё нужно много чего добавлять для нормальное работы приложения. Такая поделка в продакшине не продержится и часа. public.zip. P.S. Для запуска приложения, в папке с файлами (где package.json) в командной строке/терминале выполни: npm install; npm start; 1

@Kostyshyn 15 / 1 / 0 Регистрация: 09.12.2018 Сообщений: 39
	01.03.2019, 21:58 [ТС]	3
	Спасибо за помощь. но почемуто кнопка "Send by Get" не активна. (За русский извините, сам из Украины) 0

@kidASM 364 / 263 / 104 Регистрация: 28.08.2013 Сообщений: 620
	02.03.2019, 12:53	4
	Сообщение от Kostyshyn Спасибо за помощь. но почемуто кнопка "Send by Get" не активна. Исправил проблему с кнопкой. testApp.zip По поводу HTTP методов. Технически можно использовать любой из ниже перечисленных (если уложиться в ограничения по длине строки). Но на практике рекомендуется их использовать так: GET - Метод GET запрашивает ресурсы с сервера (страница, файл (картинка, видео, т.д.и т.п.)). POST - Используется для отправки данных на сервер (текст, картинки, ...). Сервер может вернуть ответ браузеру, а может и нет, зависть от реализации сервера. Больше можно узнать здесь. И ещё. Все эти методы - это условное разделение, так как по-факту на сервере реализация каждого из методов (роута) зависит от задачи и программиста. 1

@Kostyshyn 15 / 1 / 0 Регистрация: 09.12.2018 Сообщений: 39
	02.03.2019, 12:54 [ТС]	5
	Искренне благодарю ! 0

Опции темы