javascript - 如何将值从 Java Controller 传回 Thymeleaf 前端？

Question

我正在构建一个应用程序，当用户从 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>      

Answer 1

到目前为止，下拉列表包含选项值和选项文本。但是如果你想使用相同的两个值也可以做到。为此，

将您的 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>