Grails 控制器将奇怪的 JSON 发送回浏览器

Question

我有一个 Grails (2.3.6) 应用程序提供一个 HTML 表单，其中包含两个 <select/> 元素：一个允许用户选择 country，然后选择 state。当用户选择一个新的country 时，我想更新state 选择元素。为此，在国家 change() 上，我需要向服务器询问新的状态选项列表以填充状态 <select/>：

<div class="blah">
    <label for="state">State</label><br/>
    <g:select id="state" name="state" from="${states}" />
</div>

<script type="text/javascript">
    jQuery('#country').change(function() {
        var countryName = $('#country option:selected').val();

        jQuery.ajax({
            url: "getStateListByCountry",
            type:"get",
            dataType: 'json',
            data: {
                countryName: countryName
            },
            success: function(data) {
                alert("Received following from server: " + data);

                $("#state option").remove();

                $.each(data, function(key, value) {
                    $('#state')
                        .append($("<option></option>")
                        .attr("value",key)
                        .text(value));
                });
            },
            error: function(xhr){
                alert(xhr.responseText); //<----TODO: Replace
            }
        });
    });
</script>

然后，在 Grails/服务器端：

class MyController {
    // Stub this with dummy data to return.
    def getStateListByCountry() {
        List<String> states = new ArrayList<String>()
        states.add("NY")
        states.add("NH")
        states.add("VT")

        println "Sending the following back to browser: ${states}."

        states
    }       
}

在运行时，当我在“#country”选择中选择一个新国家/地区时，我在 Grails 应用程序日志中看到以下消息：

将以下内容发送回浏览器：[NY, NH, VT]。

然后在浏览器中我得到一个alert(...)，它打印我的自定义“未找到页面”错误页面的 HTML！

此外，我的“#state”选择不会使用 3 个虚拟状态值进行更新。因此，Grails 服务器正确接收客户端请求，并尝试发回我的虚拟状态列表，但在某处返回“未找到页面”模板。关于这里发生了什么或我的代码有什么问题的任何想法？

---

更新

似乎我的error 函数正在执行，而我在alert 中看到的奇怪HTML 实际上是传递给该方法的xhr.responseText。

Grails 服务器没有在日志中报告任何错误，getStateListByCountry 方法中的println 确认返回给客户端的 JSON 是 ["NY","VT","NH"]。所以似乎服务器以某种方式返回错误，并且 jQuery 正在执行 error 处理程序，不是 success 处理程序......想法？

Answer 1

尝试在状态中添加：“as JSON”：

states as JSON

编辑：

smeeb，我这里做了个测试环境，改了你的：

jQuery.ajax({
    url: "controllername/getStateListByCountry",
    type: "get",
    data: countryName,

在action前使用controllername，不需要dataType，返回：

render states as JSON

它成功了，你可以试试吗？

Answer 2

调用更改国家/地区的函数

   jQuery('#country').change(function() {

    jQuery.ajax({
        url: "getStateListByCountry",
        type:"get",
        dataType: 'json',
        data: {
            countryName: countryName
        },
       success: function(data) {
        $('#divId').replaceWith(data);

    }

并在指定的 url getStateListByCountry 上检索 states 并从那里渲染一个模板

render template: 'nameOfTemplate', model: [states:States.list()]

然后在成功回调中用新模板替换 div。

您应该在模板中放置 g:select 框并使用模型中传递的状态列表填充该选择框。 您可以在创建视图时创建模板，只需在模板名称前添加下划线 "_"。更多关于Templates and Views

Answer 3

问题出在客户端。我已经指定了“json”的dataType，但没有通过 Grails render(...) 方法返回 JSON。