【Ajax】向Controller传递form表单(未提交)的值

需求

1、不提交form表单的情况，将form表单的一个input的值传到后台的Controller（此处用jQuery）

2、后台的Controller接收到该值，Ajax的方式局部刷新页面某处（此处用thymeleaf实现）

实现第一个场景

不提交下面的form表单，将表单的一个input输入框的值（或是下拉选择框(select)的值，同理）传输到后台的controller

form表单部分

<form method="post" th:action="@{/gdsubmit}">        

  <select type="text" placeholder="请选择" name="studentFk" id="selectPerson" onblur="myFunction()">
      <option>请选择1</option>
      <option>请选择2</option>
      <option>请选择3</option>
  </select>
  <input type="text" name="id">

</form>

可以看到，该下拉选择框的id 和 onblur 均绑定了js：id="selectPerson" onblur="myFunction()"

JS部分

<script>
    function myFunction() {
        postData();
    }

    function postData() {
        //使用ajax的方式 向Controller提交表单

        //获取下拉框的值
        var opt_values = $("#selectPerson  option:selected").val();

        // #comment-container是选择器，选择了带#comment-container标签的html代码块，然后局部刷新该代码块。
        $("#comment-container").load("/refreshtopic/"+opt_values,function (responseTxt, statusTxt, xhr) {  //回调函数为空，没写逻辑
        });
    }
</script>

onblur是一个离焦事件，当离开焦点，就会执行myFunction()这个函数，myFunction()又会调用postData()这个函数，Ajax的方式向controller传值。

注意看load里面的路径：我写的是：
"/refreshtopic/"+opt_values
其实是路径的一个拼接，写死的路径拼上了一个变量。从而使Controller接收路径变量。

Controller接收下拉框的参数

@RequestMapping("/refreshtopic/{opt_values}")
    public String refreshTopic(@PathVariable("opt_values") Integer opt_values,Model model,HttpSession session) {

		//这样就接收到下拉框的参数了
        System.out.println(opt_values);
        //添加该属性到model
        model.addAttribute("hello","opt_values");
		//将该参数传递给需要局部刷新的html位置
        return "openreport::comment-container";
    }

实现第二个场景

可以看到，上面的controller返回了一个页面，页面就是 openreport.html 的对应 comment-container 的位置。（这里不懂看我之前写的文章：thymeleaf的局部刷新）

<div th:fragment="comment-container" id="comment-container" class="comment-container">
      <h4 th:text="${hello}"></h4>
</div>

实际上就是局部刷新了这个位置。