我正在构建一个应用程序,当用户从 select
标签中选择一个值时,系统会提示用户使用另一个带有相应数据的 select
标签。我通过从第一个字段中获取数据并使用 Ajax 将其传回我的 Controller 然后计算它并发回新数据来实现这一点。但是,我很难将对象发回。我不确定我是否做对了。我尝试使用 model.addAttribute()
但我相信我设置错误。
工具:
Java
Spring Boot
Thymeleaf
Bootstrap
Controller :
@RequestMapping(value="/ajax/searchUserProfiles.html",method=RequestMethod.POST)
public @ResponseBody void getSearchUserProfiles(@RequestBody TestApp mTestApp, HttpServletRequest request) {
String val = mTestApp.getDtoTiername();
List<String> t1 = new ArrayList<String>();
for(TestApp temp: exampleAry) {
if(temp.getDtoTiername().equalsIgnoreCase(val)) {
t1.add(temp.getDtoSystem());
}
}
//I want to return t1 to my select tag in my front-end
}
Ajax :
function searchText() {
var search = {
"dtoTiername" : "Web"
}
$.ajax({
type: "POST",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url: "/ajax/searchUserProfiles.html",
data: JSON.stringify(search), // Note it is important
success :function(result) {
// do what ever you want with data
}
});
}
HTML:
<div class="col col-lg-9 search-bar">
<div class="form-group">
<label>Tier:</label>
<select class="js-example-basic-single" th:field="*{ary4}" id="selectData1">
<option value=""></option>
<option th:each="ary4 : ${ary4}"
th:value="${ary4.dtoTiername}"
th:text="${ary4.dtoTiername}"/>
</select>
<div class="text-right">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-lg-9 search-bar">
<div class="form-group">
<label>Type:</label>
<select class="js-example-basic-single" th:field="*{t1}" id="selectData2">
<option value=""></option>
<option th:each="t1 : ${t1}"
th:value="${t1.dtoTiername}"
th:text="${t1.dtoTiername}"/>
</select>
<div class="text-right">
</div>
</div>
</div>
</div>
最佳答案
到目前为止,下拉列表包含选项值和选项文本。但是如果你想使用相同的两个值也可以做到。为此,
将您的 Controller 代码修改为
@RequestMapping(value="/ajax/searchUserProfiles.html",method= RequestMethod.POST)
public @ResponseBody List<String> getSearchUserProfiles(@RequestBody String mTestApp, HttpServletRequest request) {
List<String> t1 = new ArrayList<>();
t1.add("AAAA"); // i added sample text, however you can fetch values from dao as well
t1.add("BBBBB");
return t1;
}
将您的 javascript 代码更新为
function searchText() {
var search = {
"dtoTiername" : "Web"
}
$.ajax({
type: "POST",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url: "/ajax/searchUserProfiles.html",
data: JSON.stringify(search),
success :function(result) {
$.each(result,function(i,obj)
{
var div_data="<option value="+obj+">"+obj+"</option>"; //this would modify if you return map from java instead of list
$(div_data).appendTo('#testing'); //append new dynamically generated option to element having id "testing"
});
}
});
}
请确保您的 html 选择选项具有在上述脚本中指定的 id,如下所示
<select id="testing"></select>
如上代码,多次调用js函数searchText,下拉框会追加多份option。在这种情况下,清空\附加\ block 将是您的用例。
此外, Controller 代码应该放在用 @RestController
注释的类中,而不是放在返回 ModelAndView
的 @Controller
类中
编辑:使用 html 页面作为
<html>
<script>
// Here paste script provided
</script>
<body>
<input type="button" value="test" onclick="searchText()" />
<select id="testing"></select>
</body>
</html>
关于javascript - 如何将值从 Java Controller 传回 Thymeleaf 前端?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59272544/