Jquery 400 - 自动完成Spring MVC不工作

问题描述：

我面临自动完成Jquery的问题。我花了整整一天的时间尝试各种不同的例子，并不断得出同样的错误。Jquery 400 - 自动完成Spring MVC不工作

我想实现什么？

当用户使用Spring MVC模式从我的数据库中键入搜索栏时，获取我的子类别的下拉列表。

我面对什么错误？

有什么我试图解决这个问题？

在阅读关于这个特殊问题上的各种主题，在stackoverflow和各种其他网站。我发现这通常是一个问题，因为脚本不合适。我尝试了重新排列我的脚本的多种组合，但仍然无法解决此错误。

这是我的标题。

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="resources/js/jquery-3.1.1.min.js"></script> 
<script src="resources/js/angular.min.js"></script> 
<link href="resources/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="resources/js/bootstrap.min.js"></script> 
<script src="resources/js/dirPagination.js"></script> 
<link href="resources/css/jquery-ui.theme.min.css" rel="stylesheet" /> 
<script src="resources/js/jquery-ui.min.js"></script> 
<link id="sidebarcss" href="resources/css/simple-sidebar.css" rel="stylesheet"> 
<link href="resources/css/footer-distributed-with-address-and-phones.css" rel="stylesheet" /> 
<link href="resources/css/megamenu.css" rel="stylesheet" /> 
<link href="resources/css/Main.css" rel="stylesheet" /> 
<link rel="icon" href="resources/images/logo.png"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<title>MiniKart</title>

这是我的脚本

$(document).ready(function() { 
$(function() { 
$("#searchbar").autocomplete({ 
source: function(request, response) { 
$.ajax({ 
url: "/MiniKart/getSubCategory", 
type: "POST", 
data: { subCategoryName: request.subCategoryName }, 
dataType: "json", 

success: function(data) { 
response($.map(data, function(v,i){ 
return { 
label: v.subCategoryName, 
value: v.subCategoryName 
}; 
})); 
} 
}); 
} 
}); 
}); 
});

这是我的控制器

List<SubCategory> data = new ArrayList<SubCategory>(); 



@RequestMapping(value = "/getSubCategory", method = RequestMethod.POST, produces = "application/json") 
public @ResponseBody List<SubCategory> getSubCategory(@RequestParam String subCategoryName, HttpServletResponse response) { 
return simulateSearchResult(subCategoryName); 

} 


private List<SubCategory> simulateSearchResult(String subCategoryName) { 

List<SubCategory> result = new ArrayList<SubCategory>(); 

for (SubCategory subCategory : data) { 
if (subCategory.getSubCategoryName().contains(subCategoryName)) { 
result.add(subCategory); 
} 
} 

return result; 
}

我想目前的榜样

Spring MVC Autocomplete

一些额外的信息

jQuery用户界面 - 1.12.1

日食 - 氖

的Maven依赖关系

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

我在做什么错在这里？欢迎您提出任何建议。谢谢。

答

终于解决了之后各种不同的方法...... 这里是我做过什么

使用自动完成脚本的独立版本。
使用我的分类列表填充数据。
更改getTags的返回类型& simulateSearchResult为String。
使用Gson将结果转换为Json-String并将其返回。

我的头

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="resources/js/jquery-3.1.1.min.js"></script> 
<script src="resources/js/angular.min.js"></script> 
<script src="resources/js/jquery.autocomplete.min.js"></script> 
<link href="resources/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="resources/js/bootstrap.min.js"></script> 
<script src="resources/js/dirPagination.js"></script> 


<link id="sidebarcss" href="resources/css/simple-sidebar.css" rel="stylesheet"> 
<link href="resources/css/footer-distributed-with-address-and-phones.css" rel="stylesheet" /> 
<link href="resources/css/megamenu.css" rel="stylesheet" /> 
<link href="resources/css/Main.css" rel="stylesheet" /> 
<link rel="icon" href="resources/images/logo.png"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
<title>MiniKart</title>

我的脚本

$(document).ready(function() { 

$('#searchbar').autocomplete({ 
    serviceUrl: '${pageContext.request.contextPath}/getTags', 
    paramName: "categoryName", 
    delimiter: ",", 
    transformResult: function(response) { 

    return { 
     //must convert json to javascript object before process 
     suggestions: $.map($.parseJSON(response), function(item) { 

      return { value: item.categoryName, data: item.categoryId }; 
     }) 

    }; 

     } 

}); 

});

我的控制器

@RequestMapping(value = "/getTags", method = RequestMethod.GET) 
public @ResponseBody String getTags(@RequestParam String categoryName) { 

    return simulateSearchResult(categoryName); 

} 

private String simulateSearchResult(String categoryName) { 

    List<Category> result = new ArrayList<Category>(); 
    List<Category> data = categoryService.listCategory(); 
    Gson gson = new GsonBuilder().excludeFieldsWithoutExposeAnnotation().create(); 
    String j = null; 
    // iterate a list and filter by tagName 
    for(Category tag : data) { 

     if (tag.getCategoryName().contains(categoryName)) { 

      result.add(tag); 
      j=gson.toJson(result); 

     } 
    } 

    return j; 
}

GSON我没有得到花花公子 – jeevanswamy21

Jquery 400 - 自动完成Spring MVC不工作

相关推荐