springmvc 与 ajax 参考 https://blog.csdn.net/weixin_40652498/article/details/104174706
引入js文件
再有拦截器的工程中,直接这样引入,可能会被拦截,所以要对拦截规则进行设置
<script src="js/xx.js"/>
或者引入网络资源文件,https://www.jb51.net/zt/jquerydown.htm 在这个网址中去查询需要的然后引入,不会被拦截
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
添加按钮
<button id="btnEnter">btn按钮</button>
处理事件,弹窗
<script>
$(function(){
$("#btnEnter").click(function () {
alert("Hello Root");
});
});
</script>
ajax 直接接收返回List 并遍历
success: function (data) {
var list = eval("("+data+")");
for(var i=0;i<list.length;i++){
alert(list[i].id+" "+list[i].userName);//访问每一个的属性
}
}
ajax 接收服务器消息,并且在html页面显示
首先在html页面设置一个
<a id="aaab" ></a>
当收到服务器消息后<script type="text/javascript">
document.getElementById("submit").οnclick=function(){
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
$.ajax({
url:"user/equale", //请求地址
contentType:"application/json;charset=UTF-8", //传输数据类型
data:JSON.stringify({name:name,password: password}), //要传输的数据
dataType:"json", //返回值类型
type:"post", //请求方式
success:function(msg){ //data表示服务端响应的数据
if (msg=="success") {//根据返回值进行跳转
window.location.href = 'index.jsp';
}else{
alert("用户名或密码错");
document.getElementById("aaab").innerHTML=msg;
}
}
});
}
</script>
//对比一个用户(用户名密码)
@RequestMapping(value = "/equale" ,method = RequestMethod.POST)
public @ResponseBody String equaleUser(@RequestBody Users user,HttpServletRequest request) {
String state="error";
String retu="";
ObjectMapper mapper = new ObjectMapper();
try {
retu = mapper.writeValueAsString(state); //转换为键值对格式 匹配json
}catch (JsonProcessingException e){
}
return retu;
}
效果
判断单选框是否被选中
if(!$("#arge").is(":checked")){
alert("同意协议");
return ;
}
js 中保存本次请求的值
如果发现 localStorage 的值总在发生改变,首先考虑的时,当前浏览器打开的别的页面,正在改变localStorage的值
localStorage.xx=yy; //保存当前值,下次触发js 可以使用
onload页面加载完成后,触发事件
window.onload=function(){
};
定时器的开启与启动
var tim = window.setInterval(function(){
},300);
上面的定时器默认自动开启
//开启定时器
tim.play();
//关闭定时器
tim.pause();
去掉鼠标事件
.pageDisable { /*pointer-events: none !important;*/ }
表单禁用
<fieldset disabled> </fieldset>