Grails刷新图表

我在grails项目中使用了morris.js饼图，现在我尝试在单击按钮并刷新图表后计算一个int。但如果我使用“重定向”，它会刷新整个站点。 那么，有没有推荐的方法只刷新图表

普惠制：

---

这个想法是通过ajax调用创建一个请求，它将为您提供一个响应，您将使用该响应更新您的Morris甜甜圈

因此，您可以使用表单创建ajax调用。您有两个选择：

使用远程标记（版本，或Grails3.x上的）。使用远程表单，您可以使用呈现模板的操作的响应更新html代码

实现您自己的ajax方法（推荐用于良好的代码实现）会导致远程ajax grails标记在HTML上附加js代码。这一点都不好（前端开发人员会杀死您和小猫：），并且不推荐使用

这个ajax请求必须返回一个新的数据模型，可以是JSON格式，您可以使用js方法更新您的甜甜圈

---

对于更复杂的JSON的考虑使用，如果你使用的GRASS大于V.3.1

，非常感谢你的回答，这真的很有帮助。我想我必须更多地使用Ajax。我尝试了您的代码，但在我的浏览器控制台中出现了一个错误：“uncaughtsyntaxerror:JSON中位置1处的意外标记o”。在我删除“var response=$.parseJSON（data）；”之后，它就可以工作了。我认为控制器的结果已经是JSON格式的，因此您不必再次解析它。但我不确定。：）不客气。默认情况下，响应不是控制器中的json，您必须对其进行解析。使用chrome调试器了解成功方法上的数据。

<g:form controller="blankTest">
    <g:actionSubmit value="Update" action="action"/>
</g:form>
<div id="myfirstchart" style="height: 250px;"></div>

<g:javascript id="test">
    new Morris.Donut({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',

        label: 'Test',

        resize: true,

        colors : ['#00ff00', '#ff0000', '#ffff00'],

        data: [
            { label: 'Number1', value: ${number}},
            { label: 'Number2', value: ${number1}},
            { label: 'Number3', value: ${number2}}
        ],
    });
</g:javascript>

int number = 0

def index() {
    [number: number, number1: 34, number2: 8]
}

def action() {
    number++
    redirect view: 'index'
}

<g:form name="form" controller="blankTest">
    <input type="submit" value="Update"/>
</g:form>
<div id="myfirstchart" style="height: 250px;"></div>

<g:javascript id="test">
    //we will need this reference for updating it
    var donut = new Morris.Donut({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',

        label: 'Test',

        resize: true,

        colors : ['#00ff00', '#ff0000', '#ffff00'],

        data: [
            { label: 'Number1', value: ${number}},
            { label: 'Number2', value: ${number1}},
            { label: 'Number3', value: ${number2}}
        ],
    });

$(document).ready(function(){
   $('#form').submit(function(event){
       event.preventDefault(); //blocks native form submit

       $.ajax('${createLink(controller: 'blankTest', action: 'action')}', {
           success: function (data) {
               var response = $.parseJSON(data);
               donut.setData(response); //updating the donut with json response
           }
       });
   });   

});
</g:javascript>

def action() {
    number++
    List result = [
       [label: 'Number1', value: number],
       [label: 'Number2', value: number1],
       [label: 'Number3', value: number2]
    ]

    render result as JSON
}