Javascript 如何在NodeJ上侦听输入而不使用bodyparser获取值
是否可以在nodejs“侦听”输入文本字段 我想在我的html页面上使用搜索输入，我想监听用户输入的任何值。不使用提交按钮和主体解析器获取最终值Javascript 如何在NodeJ上侦听输入而不使用bodyparser获取值,javascript,node.js,Javascript,Node.js,是否可以在nodejs“侦听”输入文本字段 我想在我的html页面上使用搜索输入，我想监听用户输入的任何值。不使用提交按钮和主体解析器获取最终值 我尝试在选择html输入后添加事件侦听器，但我的选择器未定义 这是我的server.js文件 // 3rd part modules const express = require('express') const hbs = require('hbs') const fs = require('fs'
我尝试在选择html输入后添加事件侦听器，但我的选择器未定义 这是我的server.js文件
// 3rd part modules
const express = require('express')
const hbs = require('hbs')
const fs = require('fs')
const moment = require('moment')
// App modules
const userData = require('./fetch')
// App basic configs
const port = process.env.PORT || 3000
const app = express()
//Log when someone is on app
app.use((req, res, next) => {
const now = moment().format("D MMM YYYY, HH:mm")
const clientIp = req.ip
const log = `${now}: from ${clientIp}`
fs.appendFile('server.log', `${log}\n`, (err) => {
if (err) throw err
})
next()
})
// Maintenance mode
// app.use((req, res, next) => {
// res.render('maintenance.hbs', {
// pageTitle: 'Maintenace mode'
// })
// })
// Express middleware to store public files & static pages
app.use(express.static(`${__dirname}/public`))
// View engine Handlebars
app.set('view engine', 'hbs')
// Use partials for header and footer
hbs.registerPartials(`${__dirname}/views/partials`)
// Pass custom functions everywhere
hbs.registerHelper('getCurrentYear', () => {
return new Date().getFullYear()
});
app.get('/', (req, res) => {
res.render('home-page.hbs', {
welcomeMessage: 'Welcome to home page',
pageTitle: 'Home page',
location: userData.location,
currentTemp: userData.currentTemp,
feelTemp: userData.feelTemp
})
})
// Don't forget the command to nodemon to see changes on hbs files
// nodemon server.js -e js,hbs,html,css
app.listen(port, () => {
console.log(`Server is up on ${port}`)
})
// 3rd part library
const axios = require('axios')
// Input selection
const locationInput = document.querySelector('#locationInput').value()
// Encode user data & Use it to fetch his location
const encodedAddress = `greece${encodeURIComponent(locationInput)}`
const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodedAddress}&key=AIzaSyAnzbpJRrrx9xl2ZjRdwOx4APrn-zgVscM`
const getWeatherData = async (encodedAddress) => {
const location = await axios(geocodeUrl)
if (location.data.status === 'ZERO_RESULTS') {
throw new Error('Unable to find that address.')
}
const lat = location.data.results[0].geometry.location.lat
const long = location.data.results[0].geometry.location.lng
const weatherUrl = `https://api.darksky.net/forecast/95886b065ed14ca53b317610064fe04a/${lat},${long}?units=ca`
const weatherData = await axios.get(weatherUrl)
return {
location,
weatherData
}
}
getWeatherData(encodedAddress).then((info) => {
const location = info.location.data.results[0].formatted_address
const currentTemp = info.weatherData.data.currently.temperature
const feelTemp = info.weatherData.data.currently.apparentTemperature
return {
location,
currentTemp,
feelTemp
}
}).catch((e) => {
if (e.code === 'ENOTFOUND') {
console.log('Unable to connect to API servers')
} else {
console.log(e.message)
}
})
module.exports = {
location,
currentTemp,
feelTemp
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{{> header}}
<p>{{welcomeMessage}}</p>
<p>This is home page</p>
<input id="locationInput" type="text" placeholder="Location">
<p>{{location}}</p>
<p>{{currentTemp}}°C</p>
<p>Feels like {{feelTemp}}°C</p>
{{> footer}}
</body>
</html>
家
{{>头}
{{welcomeMessage}}
这是主页
{{location}}
{{currentTemp}}}摄氏度
感觉像{{feelTemp}}}摄氏度
{{>页脚}
onchangeajaxonchangeonchange.change（）