bootstrap将表单获取到的值传往后端

这是我参与 8 月更文挑战的第 28 天，活动详情查看： 8月更文挑战

（1）将普通文本框中的值传递给后端

前端html中代码如下：

 <div class="form-group">
           <label for="name">姓名</label>
           <input type="text" id="name" class="form-control" />
 </div>

给文本框内容设置了唯一的id值，这样后端只需要通过这个id值获得表单中的文本框输入值。

js代码如下：

<script>
	var name = $("#name").val();
</script>

(2) 将复选框中的值传递给后端

前端html中代码如下：

<div class="form-group">
    <label>角色权限范围</label>
        <div class="form-check form-check-inline">
          	<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="用户管理" name="role_scope">
          	 <label class="form-check-label" for="inlineCheckbox1">用户管理</label>
         </div>
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="角色管理" name="role_scope">
              <label class="form-check-label" for="inlineCheckbox2">角色管理</label>
          </div>
          <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="日志管理" name="role_scope">
                 <label class="form-check-label" for="inlineCheckbox3">日志管理</label>
           </div>
</div>

再在JavaScript中通过一致的name值逐一检查，每个复选框是否被勾选，input中的value值就是我们获取到的值。用一个数组来接受值，然后使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串string类型，传递给后端,再由后端进行一系列操作。

js代码如下：

$("[name=role_scope]:checked").each(function () {
            data_scope_list.push($(this).val())
        })
var data_scope = JSON.stringify(data_scope_list);

(3) 将下拉列表中内容传递给后端

前端html中代码如下：

  <div class="form-row">
      <select class="selectpicker form-control" aria-label=".form-select-lg example" id="role_name">
      	<option value="超级管理员">超级管理员</option>
     	<option value="系统管理员">系统管理员</option>
        <option value="安全审计员">安全审计员</option>
       </select>
   </div>

js中与文本框中获取值一样，只需要通过id值role_name，就可以获得当前选择的值。

var role_name = $("#role_name").val();

附加：通过thymeleaf将后端值渲染到下拉列表中

代码如下：

<select name="role_name" class="selectpicker form-control" id="role_name">
      <option value="">请选择</option>
      <option th:each="role:${role_names}"
          	  th:value="${role}" th:text="${role}">
      </option>
 </select>

role_names是从后端controller中获得的所有角色名的集合List,通过thymeleaf的th:each标签获得每个role值。

后端controller中代码如下：

List<String> role_names = roleService.queryRole_names();
model.addAttribute("role_names",role_names);