Как обработать почтовый запрос ajax с помощью node.js и без фреймворков?
Я практикую node js и ajax без каких-либо фреймворков (таких как jquery, expressJS), создавая простое приложение, которое предоставляет информацию о погоде в городе, используя openweatherapi. Вот мой код: app.js
const http = require("http");
const fs = require("fs");
const path = require("path");
const { parse } = require('querystring');
const server = http.createServer((req, res)=>{
if (req.url === "/"){
fs.readFile("index.html", "UTF-8", function(err, data){
res.writeHead(200, {"Content-Type": "text/html"});
res.end(data);
});
}else if (req.url === "/public/styles.css"){
var cssPath = path.join(__dirname + req.url);
var cssFileStream = fs.createReadStream(cssPath, "UTF-8");
res.writeHead(200, {"Content-Type": "text/css"});
cssFileStream.pipe(res);
}else if (req.url === "/public/main.js"){
var jsFileStream = fs.createReadStream(`${__dirname}/${req.url}`, "UTF-8");
res.writeHead(200, {"Content-Type": "text/js"});
jsFileStream.pipe(res);
}else if (req.url === "/favicon.ico"){
res.statusCode=204;
res.end();
};
if (req.url == = "/"&&req.method== = "POST"){
let body = "";
req.on('data', chunk=>{
body += chunk.toString();
});
req.on("end", ()=>{
parse(body);
});
console.info(body);
};
});
var PORT = process.env.port || 3000;
server.listen(PORT);
console.info(`Server listening on port ${PORT}`);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Weather Application</title>
<link href = "./public/styles.css" rel = "stylesheet" type = "text/css"/>
<script src = "./public/main.js"></script>
</head>
<body>
<div class = "weather-div">
<h1> Search for weather information of a city</h1>
<form method = "post" action = "/">
<input class = "locationName" id = "cityName" name = "city" type = "text" placeholder = "City" required/>
<input class = "locationName" id = "countryName" name = "city" type = "text" placeholder = "Country"/>
</form>
<button id = "submitBtn" type = "submit">Search Weather</button>
</div>
<body>
</html>
main.js
function getData(){
var city = document.getElementById('cityName');
var country = document.getElementById('countryName');
if (city.value.length>0){
const apiKey = "APIKey";
const apiUrl = "http://api.openweathermap.org";
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
};
};
xhttp.open("POST", "app.js",true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`city=${city}&country=${country}`);
};
};
window.onload=function(){
document.getElementById("submitBtn").addEventListener("click", getData, false);
};
Итак, что я хочу сделать, это отправить название города ввода с помощью ajax, потому что я пробовал с простой формой и кнопкой отправки, но он продолжает обновлять страницу. Я не хочу этого. И я хочу получить данные в app.js, чтобы проанализировать их и отфильтровать их код с помощью json-файла городов, а затем вернуть их в main.js, чтобы отправить вызов API в openweathermap. К счастью, я знаю, как делать простые вещи: синтаксический анализ и вызов API. Но все остальные вещи я совершенно не знаю. когда я ищу об этом, я нахожу решение только с использованием jquery или экспресс, но я не хочу этого, я хочу, чтобы чистый javascript стал лучше. Заранее спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Первым аргументом в обратном вызове события является объект события. Для формы, чтобы предотвратить поведение браузера по умолчанию при обновлении или переходе на страницу действий, используйте e.preventDefault().
Таким образом, событие щелчка, которое выполняет обратный вызов getData, будет выглядеть так:
function getData(e){ // First argument of an event callback is the event
e.preventDefault(); // Prevent default button type submit behavior
var city = document.getElementById('cityName');
var country = document.getElementById('countryName');
if (city.value.length>0){
const apiKey = "APIKey";
const apiUrl = "http://api.openweathermap.org";
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
};
};
xhttp.open("POST", "app.js",true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`city=${city}&country=${country}`);
};
};
Программирование есть несколько способов сделать что-то. С текущей разметкой и атрибутами похоже, что все должно произойти, чтобы добавить элемент кнопки в качестве дочернего элемента элемента <form>, например <form> <!-- some other elements.. --> <button id = "submitBtn" type = "submit">Search Weather</button>, чтобы кнопка отправки принадлежала или «назначалась», если хотите, этой форме.
Если я хорошо понимаю, нет необходимости помещать его в тег формы.
Да, несколько способов сделать это
Огромное спасибо за помощь.
И я должен поместить свои входные данные в форму с action = "/" и method = "post"?