nodejs関数からp要素を更新する

Question

入力フォームからnodejsサーバーに値を送信する必要があります。この値で計算がトリガーされ、p要素をクライアント側の計算結果で更新する必要があります。

どうすればいいですか？

これは私が持っているものです。

//サーバー側：

app.post('/calculate/:id', function(req, res){ 
    var title = 'Tax Calculation'; 
    var tax= taxcalculation(req.params.id); 
    res.render('index', { 
     title: title, 
     tax: tax, 
    }); 
}); 

が//クライアント側：

var income= document.getElementById("income"); 
     var tax = document.getElementById("tax") 
     $(income).on('change', function() { 
      console.log("changed"); 
      $.ajax({ 
       type: 'POST', 
       url: '/calculate/'+income.value, 
       success: function() { 
        $('#tax').html('<%= tax %>'); 
       }, 
       error: function() { // if error occured 
        alert("Error occured, please try again"); 
       }, 
      });    
     }); 

Answer 1

わかりましたので、あなたは多くのデータを与えていませんこれは、計算を行い、結果をP要素に追加するノードWebサービスのクライアント側に結果を含む応答を送信するのと同じくらい簡単です。

Answer 2

ajax呼び出しを処理するサーバーコードは、<p>の内容を含むjson応答を出力する必要があります。インデックスページ全体を再描画しないでください。私は多くのnode.jsをやっていないので、あなたが理解するために残しておきます。

ajax成功関数は、応答をパラメータとして受け入れ、その応答に対して操作する必要があります。このAJAXリクエストに対するサーバの応答を仮定

はフォーマット{"tax": 15.99}は次のとおりです。

$.ajax({ 
     type: 'POST', 
     url: '/calculate/'+income.value, 
     success: function(response) { 
      if (response.tax || response.tax === 0) { 
      $('#tax').html(response.tax); 
      } 
     }, 
     error: function() { // if error occured 
      alert("Error occured, please try again"); 
     }, 
    });