如何通过使用Grails 2.1.0中的AJAX从Grails Controller中获取数据,在单击相同表单的搜索按钮时更新2个文本字段

时间:2015-07-01 04:56:25

标签: ajax grails

我有一个控制器(SearchController),它在点击搜索按钮(myview.gsp内部)时获取数据我想用我在控制器(SearchController)中的数据填充同一myview.gsp中存在的2个文本字段。我知道我需要做ajax调用因为我想只填充2个字段而不想重新加载包含其他有价值信息的页面。我怎样才能实现它,请指导我

这是我的控制器

def searchItem() {

    def itemFound = MyService.searchP20Code(params["item"])

    def resultMap = [:]
    if (itemFound!=null)

{



   resultMap.put("CODE",itemFound[1])
   resultMap.put("DESC",itemFound[2])

}


println "Result:"+resultMap



session.setAttribute("searchResult", resultMap)
render(view: myview" )


}

myview.gsp

          myview.gsp 


                   <div class="leftPanel filter-label">
                <a href="#" class="tt"> <g:message
                        code="Normal.label.Code" />

                </a>
            </div>
            <div class="rightPanel filter-field-wrapper">
                <input type="text"
                    name="Code" maxlength="30"
                     value=""
                     id="i_code" />
            </div>
        </div>

        <div class="formLables">

            <div class="leftPanel filter-label">
                <a href="#" class="tt"> <g:message
                        code="Normal.label.Description" />
                </a>
            </div>
            <div class="rightPanel filter-field-wrapper">
                <input type="text" 
                    name="Desc" maxlength="30"
                    onkeyup="fieldMaxlength(&#39;material_code&#39;)" value=""

                    id="i_description" />
            </div>
        </div>



                <g:actionSubmit 

                    value="${message(code:'Normal.button.search', default: 'Search Code')}"
                    action="searchItem" />

请帮助我如何使用ajax更新myview.gsp中的这两个文本字段。我正在使用grails 2.1.0

1 个答案:

答案 0 :(得分:0)

Here您可以找到Grails内置Ajax支持的详细示例。

您也可以使用JQuery(example here

编辑:

您的控制器需要如下所示:

import grails.converters.JSON

class ExampleController {
    ....    

    def searchItem() {

        def itemFound = MyService.searchP20Code(params["item"])

        def resultMap = [:]
        if (itemFound!=null) {
            resultMap.put("CODE",itemFound[1])
            resultMap.put("DESC",itemFound[2])
        }


        println "Result:"+resultMap



        //session.setAttribute("searchResult", resultMap)
        render(resultMap as JSON )


    }
}

和你的gsp

<head>
...
    <g:javascript plugin="jquery" library="jquery" src="jquery/jquery-{WRITE_YOUR_VERSION_HERE}.js"/>
    <script>
        function callAjax(e){
            e.preventDefault();
            $.ajax({
                url: "example/search",
                type:"post",
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                    $("input[name='Code']").val(data.CODE);
                    $("input[name='Desc']").val(data.DESC);
                }
            });
        }            
    </script>
...
</head>
<body>
....
    <input type="submit" value="Call Ajax Function" onclick="callAjax()">
....
</body>