Question

我尝试刷新jsp页面中的表格我的表加载了一个包含所有可能结果的列表。但是在搜索之后我想用搜索结果更新我的表。

我的表：

<table id="table_grid">
[...]
<c:forEach items="${cardlist}" var="card" >
<tr>
    <td>${card.name}</td>
    [...]
</tr>
</c:forEach>            
[...]
</table>

我的搜索表单：

<form:form modelAttribute="searchform" id="formSearch" action="#">
<form:select path="critere" >
  <option value="1">name</option> 
  [...]
</form:select>
<form:input type="text" path="value"/>
<input type="button" value="Search" onclick="searchAjax()"/>

我的ajax电话：

function searchAjax() {
$.ajax({
    url : 'searchlostcard',
    type: 'POST',
    data:$('#formSearch').serialize(),
    success : function(responce) {   

        /* what  i have to put here to updte my table <table id="table_grid"> */

    },      
    error : function(){
        alert("error");
    }
});

}

我希望我的表格由我的控制器列表listlostcard更新：

@RequestMapping(value="/searchlostcard") 
public  @ResponseBody
void searchlostcard(@ModelAttribute(value="searchform") SearchForm searchForm) {    

List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());

/*How to update list cardlist here*/
}

我试试这个model.put("cardlist", listlostcard);并在ajax调用success : function(responce) { $('#table_grid').update(); }但是它没有用。

Answer 1

如果您使用@ResponseBody，您可能希望以JSON或XML格式发送序列化字符串，表示丢失卡片列表。

因此，将jackson添加到您的classpaht中以获得JSON序列化程序

<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>1.9.13</version>
</dependency>

控制器中的

返回列表

@RequestMapping(value="/searchlostcard") 
public  @ResponseBody
void searchlostcard(@ModelAttribute(value="searchform") SearchForm searchForm) {    

List<Lostcard> listlostcard = lostcardRepository.findByNom(searchForm.getValue());

return listlostcard ;
}

你的JS函数将如下所示：

function searchAjax() {
$.ajax({
    dataType : "json",
    url : 'searchlostcard',
    headers : {
        'Accept' : 'application/json',
        'Content-Type' : 'application/json'
    },
    type: 'POST',
    data:$('#formSearch').serialize(),
    success : function(responce) {   

        /* what  i have to put here to updte my table <table id="table_grid"> */
        $.each( responce,function(key, card) {
            var htmlrow ="<tr><td>" + card.name + "</td></tr>";         
            $('#table_grid').append(htmlrow);
        }

    },      
    error : function(){
        alert("error");
    }
});
}

使用ajax和spring mvc更新表

1 个答案: