bugfix> javascript > 投稿

現在node.jsでアプリを作成していますが、htmlから入力を取得する方法を探しています。現在、ドロップダウンメニューで関数を呼び出し、その選択を関数への入力として使用します。ただし、基本的な関数(console.log( 'hello world');など)を呼び出そうとしても、何も起こりません。 httpモジュールを使用してサーバーを作成し、別の関数を使用してlocalhostのユーザーにhtmlを返します。これが私のコードの抜粋です。

const http = require('http');
http.createServer(function (req, res) {
    var html = buildGreeter(req);
    res.writeHead(200, {
        'Content-Type': 'text/html',
        'Content-Length': html.length,
        'Expires': new Date().toUTCString()
    });
    res.end(html);
}).listen(8080);
function buildGreeter(req) {
var test = 'Test test test   ';
var input = '<select onchange = "myFunc()"> <option> foo </option> <option> bar </option> </select>';
return '<!DOCTYPE html> <html><header></header><body>' + test + input + '</body></html>';
}
function myFunc(variable){
    console.log(variable);
}

別のモジュールを使用する必要がありますか?オンラインの多くの例では、データがサーバーに(つまりAjax経由で)送信されていることは知っていますが、このプロジェクト用のサーバーがないため、そのソリューションがどのように適用できるかわかりません。

事前に助けてくれてありがとう!

回答 1 件
  • npm i express と入力してインストールできるエクスプレスノードモジュールを使用します 。以下に、いくつかのメソッドを実装したエクスプレスを使用してサーバーをセットアップする例を示します。

    const express = require('express')
    const renderHtml = require('./util').renderHtml // Render HTML function
    let app = express() // Get instance of express server
    app.get('/', renderHtml('index.html')) // Home page
    app.get('/other', renderHtml('other.html') // Other page
    const port = process.env.PORT || 3000
    app.listen(port, function() {
      console.log(`Starting server on port ${port}`)
    }
    
    

    別のファイル( util.js と名付けました )特定のパスがサーバーで呼び出されたときに実行したい関数を書くことができます。例えば:

    // Render any html file that I have in my './html' directory
    exports.renderHtml = function (htmlFileName) {
      return function (req, res) { 
        res.sendFile(`./html/${htmlFileName}`)
      }
    }
    
    

    この例のようにドロップダウンリストを作成し、onChangeアクションをサーバーで指定する別のページの呼び出しにすることができます(最初のコードブロックを参照してください)。

あなたの答え