从 nodejs 函数更新 p 元素答案

【问题标题】：Update a p element from a nodejs function从 nodejs 函数更新 p 元素
【发布时间】：2017-09-27 05:28:46
【问题描述】：

我需要将输入表单中的值发送到 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");
                },
            });              
        });

【问题讨论】：

标签： javascript jquery html node.js express

【解决方案1】：

好的，所以您不需要提供大量数据，但这听起来很简单，就像在您的 Node Web 服务中向客户端发送包含结果的响应一样简单，该服务执行计算并将结果附加到 P 元素

【讨论】：

我可以通过刷新页面来更新 p 元素。如果不刷新页面，我怎么能做到这一点？
当你得到回复时，你可以做这样的事情document.getElementById("yourParagraph").innerHTML = response.data;

【解决方案2】：

您处理 ajax 调用的服务器代码应该输出一个 json 响应，其中将包含 <p> 的内容。它不应该重新渲染整个索引页面。我不会做很多 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");
        },
    });

【讨论】：