Ajax 从烧瓶应用程序强制重新加载模板？

我有一个Flask应用程序，我想让用户看到实时选择不同参数集的效果。因此，我在网页上显示了一个滑块，在用户选择不同的参数后，我想强制重新计算我的模型并重新显示网页

以下是我尝试过的：

在我的html中：

<div class="""slidecontainer">
         <input type="range" min="1" max="100" value={{ slider_value }} class="slider" id="myRange">
        <p>Value: <span id="demo"></span></p>
</div>

<script>
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

  var slider_value;
  slider.onchange = function() {
     output.innerHTML = this.value;
     slider_value = this.value;
     doWork();
  }
function doWork() {
    // ajax the JSON to the server
    $.ajax({
     type: 'POST',
     url: '/receiver',
     data: JSON.stringify (slider_value),
     success: function(data) { alert('data: ' + data); },
     contentType: "application/json",
     dataType: 'json'
  });
}

但是，尽管我可以看到，当用户更改幻灯片值时，它确实返回到Python代码中（因为我看到了“Data=…”打印输出），但显示的网页永远不会使用新的输出更新。有没有办法强制使用新输出呈现模板

谢谢大家!

{（{serverValue}}
<p> {({ serverValue })} <p>
<input v-model="sliderValue">

<script>
    var vm = new Vue({
        el: '#vue-container',        // make sure relevant html is inside a div with id="vue-container"
        delimiters: ['{({', '})}'],  // separate Vue delimiters from JinJa2
        data: {
            serverValue: 'no initial data',
        },
        watch: {
            // whenever sliderValue changes, this function will run
            sliderValue: this.calculateServerSide();
        methods: {
            calculateServerSide: function () {
                vmObj = this;  // access Vue instance inside Ajax calls.
                $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
                    a: 10,
                    b: 20
                }, function (data) {
                    console.log(data);
                    vmObj.serverValue = data.result;
                });
            },
        }
    })
</script>

var vm=新的Vue({
el:“#vue container”，//确保相关html位于id=“vue container”的div中
分隔符：['{（{'，'}）}']，//将Vue分隔符与JinJa2分开
数据：{
serverValue:'没有初始数据'，
},
观察：{
//每当sliderValue更改时，此函数都将运行
sliderValue:this.calculateServerSide（）；
方法：{
CalculateServer端：函数（）{
vmObj=this；//在Ajax调用中访问Vue实例。
$.getJSON（$SCRIPT\u ROOT+'/\u add\u numbers'{
a:10，
b:20
}，函数（数据）{
控制台日志（数据）；
vmObj.serverValue=data.result；
});
},
}
})

---

这是我在评论中暗示的一个例子。

最好是呈现一次页面，然后根据对象更改使用api获取新数据，然后动态呈现到页面。例如，您的JS ajax可以获取直接发布到页面的新信息，而不是强制发布刷新浏览器页面（这也是一种糟糕的用户界面体验）。我发现Vue.js在这方面非常好（并且有很好的文档）。

<p> {({ serverValue })} <p>
<input v-model="sliderValue">

<script>
    var vm = new Vue({
        el: '#vue-container',        // make sure relevant html is inside a div with id="vue-container"
        delimiters: ['{({', '})}'],  // separate Vue delimiters from JinJa2
        data: {
            serverValue: 'no initial data',
        },
        watch: {
            // whenever sliderValue changes, this function will run
            sliderValue: this.calculateServerSide();
        methods: {
            calculateServerSide: function () {
                vmObj = this;  // access Vue instance inside Ajax calls.
                $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
                    a: 10,
                    b: 20
                }, function (data) {
                    console.log(data);
                    vmObj.serverValue = data.result;
                });
            },
        }
    })
</script>