js 与 ajax

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>