一、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";
二、点击事件
- 通过class添加点击事件。
$(function(){
$(".aga").click(function(){
alert();
});
});
- 通过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),
5.JS在页面控制台打印输出object类型数据。
var description = "";
for(var i in xhr){
var property = xhr[i];
description+=i+" = "+property + "\n";
}
console.log(description);