Question

我有一个Grails（2.3.6）应用程序，其中包含两个<select/>元素的HTML表单：一个允许用户选择country，然后是state }。当用户选择新的country时，我想更新state select元素。为此，在国家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
    }       
}

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

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

然后在浏览器中我得到一个alert(...)，打印我的自定义的HTML＆＃34; Page Not Found＆＃34;错误页面！

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

更新

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

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

Answer 1

尝试添加：＆＃34;作为JSON＆＃34;在州：

states as JSON

编辑：

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

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

在actio之前使用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);

    }

并在指定的网址 getStateListByCountry 检索状态并从那里渲染模板

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

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

在模板中，您应该放置g：选择框并填充选择框，其中包含模型中传递的状态列表。您可以在创建视图时创建模板，只需在模板名称前添加下划线“_”。有关Templates and Views

的更多信息

Answer 3

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

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

更新

3 个答案: