前后端取值传值事件及thymeleaf语法

一、JS中获取值和赋值。

//1.js中获取input的值：
document.getElementById('password').value;

//2.js获取span或a标签中的值。（thymeleaf）
var integral = document.getElementById('jifen').innerText;

//3.js通过id获取th:value中的值（thymeleaf）
var productId1 = $("#biaoqian").val();

//4.js接收controller传的的参数
var id= '${id}';
var id= [[${id}]];（thymeleaf）

//4.js给标签赋值。
document.getElementById("password").innerHTML = "密码错误";

//5.js给标签更改css样式中某个属性值。
var obj = document.getElementById("btnB");
obj.style.backgroundColor = "#dddcdc";

//6.更改css样式。
var obj = document.getElementById("btn3");
obj.className = "little_circle active";

二、点击事件

1.通过class添加点击事件。

$(function(){
    $(".aga").click(function(){
        alert();
    });
});

2.通过id添加点击事件。

$('#body').on('click','#agediv3',function() {
    alert();
});

三、thymeleaf

//遍历数组
th:each="list:${list}"
//数组中的参数值
th:value="${list.jobNumber}"
//时间格式
th:value="${#dates.format(shopLottery.lotterTimeEnd,'yyyy-MM-dd HH:mm:ss')}"
//文本格式
th:text="${list.nickName}"
//条件语句
th:if="${list1.examineStatus} eq 0"
th:if="${list.status eq '待审核' || list.status eq '匹配成功待审核'}"

gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=
//点击事件
th:onclick="selectList([[${list.id}]])"//传单个值
th:onclick="selectList([[${list}]])"//传list

function selectList(id) {
}
//分解对象
th:object="${shopLottery}"
//对象中的参数
th:field="*{lotteryId}"



字典类型：
<div class="col-sm-8" th:with="type=${@dict.getType('staff_status')}">
    <label th:each="dict : ${type}" class="radio-box">
        <input type="radio" name="status"
               th:checked="${wxAssociateStaff.status} == ${dict.dictValue} ? true : false"
               th:text="${dict.dictLabel}" th:value="${dict.dictValue}"/>
    </label>
</div>

下拉框
<option th:each="list:${list}" th:value="${list.jobNumber}" th:text="${list.nickName}">下拉分类一</option>

//获取到下拉框的值
var options=$("#jobSel option:selected");  //获取选中的option
options.val();

<select id="idState" style="width: 150px" name="idState" th:value ="${stateval}" >
    <option value="1" th:selected="${stateval == 1}">状态一</option>
    <option value="2" th:selected="${stateval == 2}">状态二</option>
    <option value="3" th:selected="${stateval == 3}">状态三</option>
    <option value="4" th:selected="${stateval == 4}">状态四</option>
</select>
js：
//获取select对象
var myType = document.getElementById("idState");
//获取选项中的索引，selectIndex表示的是当前所选中的index
var index = myType.selectedIndex; 
//获取选项中options的value值
var stateval = myType.options[index].value;
//获取选项中options的value值
myType.options[index].text;
//数据回显
th:selected="${stateval == 4}"

四、前后端传值

1.往后端传普通数据。数据和业务在后端处理完再回去前端再进行跳转。

function deleteorder(id) {
 $.ajax({
          url: 后端方法地址,
          data: {"id": id, "key": value,"key":value},
          type: 'post',
          dataType: "json",
          success: function (data) {
            if (data.success == true) {//如果返回来的信息说明提交的信息为正确的
              window.location.href = 需要跳转页面的地址;
            }else{
             //错误提示。
            }
          }
      });
    }

@PostMapping("/auditList")
@ResponseBody
public AjaxJson auditList(HttpServletRequest request){
		AjaxJson j = new AjaxJson();
        
        //从前端传的data中通过key获取值
        String id= request.getParameter("id");
        String value= request.getParameter("key");
        Integer valueInt= Integer.parseInt(request.getParameter("keyInt"));//int类型
     
         j.setMsg("成功");
         j.setSuccess(true);
         return j;
         
         j.setMsg("失败");
         j.setSuccess(false);
         return j;
}

2.往后端传值，直接跳转进入下一个页面。map里面的值可以在return的页面里面直接引用进行渲染。

 function setpass() {
        window.location.href = ctx + "CenterController/setpass?id="+id+"&key=" + 							value;
    }

   @RequestMapping("/setpass")
    public String setpass(String id, String key, ModelMap map ){

        map.put("list",list);
        return "item";//直接返回静态文件目录下的html文件的名字
    }

3.往controller传list对象

js：
function selectList(list) {
    $.ajax({
        url: ctx + "LogoController/auditList",
        data: JSON.stringify(list),
        type: 'post',
        dataType: "json",
        headers:{ 'Content-Type':'application/json;charset=UTF-8' },//必须写

        success: function (data) {
            if (data.success == true) {//如果返回来的信息说明提交的信息为正确的
                window.location.href = 
            }
        }
    });
}

controller：
@PostMapping("/auditList")
@ResponseBody
public AjaxJson auditList(@RequestBody  List<demo> list){}

4.JSON对象和JSON字符串的区别

JSON字符串：var str = "{name:'xmt',sex:'woman'}";
JSON对象：var str = {name:'xmt',sex:'woman'};

JSON字符串转化为JSON对象：var obj = JSON.parse(str);
JSON对象转化为JSON字符串：var str = JSON.stringify(obj);
var jsonObj = {"openid":"xxx","username":"Ed sheeran","password":"123"};
data: JSON.stringify(jsonObj),