model.addAttribute 不适用于 jquery？答案

【问题标题】：model.addAttribute does not work with jquery?model.addAttribute 不适用于 jquery？
【发布时间】：2018-03-24 08:29:10
【问题描述】：

Ajax 向控制器发送数据。单击按钮时方法使用该数据。我的方法有model.addatribute.Alert 发布null 值。为什么？

我的控制器

@RequestMapping(value = "index", method = RequestMethod.POST)
@ResponseBody
public List<String> field(@RequestParam("tName") String name,
                          @RequestParam("dName") String dname, Model model) {
    String tn = name;
    String dn = dname;
    List<String> coname = new ArrayList<>();
    try {
        Connection mycon2 = DriverManager.getConnection("jdbc:mysql://localhost:3306", "root", "1996");
        DatabaseMetaData metaData2 = mycon2.getMetaData();
        ResultSet res4 = metaData2.getColumns(dn, null, tn, "%");
        coname = new ArrayList<>();
        while (res4.next()) {
            String column_name = res4.getString("COLUMN_NAME");
            coname.add(column_name);
        }

    } catch (Exception e) {
        // TODO: handle exception
        e.printStackTrace();
    }
    return coname;
}

索引html

<div id="RightPanel" style="width: 200; height: 100%; float: right;">
  <table class="table table-striped">
    <input type='text' id='tablehead'/>
    <tr>
      <th>Column name</th>
    </tr>
    <tr th:each="name : ${cname}">
      <td> th:text="${name}"</td>
    </tr>
  </table>
</div>

索引 html 中的 JavaScript

<script th:inline="javascript">
    function onclk(a, b) {
        var search = {
            "tName": a,
            "dName": b
        };
        $.ajax({
            type: "POST",
            url: "http://localhost:8092/index",
            data: search,
            dataType: "json",
            success: function (data) {
                var modelAttributeValue = [[${coname}]];
                alert(modelAttributeValue);
            },
            error: function () {
                alert('got error');
            }
        });
    }
</script>

【问题讨论】：

AFAIK 这种标记<tr th:each="name : ${cname}"> 仅在主页加载时运行。它不是在 ajax 调用的上下文中执行的。根据我对您的操作方法的了解，您的 ajax 调用将简单地接收一个字符串“索引”（作为return "index"; 的结果）。这将在您的success: function () { } 回调中收到，如果您将其重新定义为success: function (data) { alert(data); }，那么一旦ajax 调用完成（假设它没有失败），警报应该显示“索引”。我认为您需要增加对 ajax 工作原理的基本了解。

标签： javascript ajax spring-boot controller thymeleaf

【解决方案1】：

试试这个：

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
   function onclk( a,b) {
        var search = {
            "tName" : a,
            "dName" :b
        }
        $.ajax({
        type: "POST",
        url:  "http://localhost:8092/index",
        data: search,
        dataType: "json",
        success: function (data) {
            var modelAttributeValue = [[${coname}]];
            alert(modelAttributeValue); },
        error: function(){
            alert('got error');
        }
    }); 
  /*]]>*/
</script>

【讨论】：