ajax下window.location.href页面不跳转问题

目录

1.input标签未放在form标签里面

解决办法：

2.input标签里的"type"属性未设置，默认为"submit"

原因：

解决办法：

3.引入js文件顺序错误

原因：

解决办法

4.ajax下的根路径错误

解决办法：

5.window.location.href方法结构写错

解决办法：

附上笔者代码：

html:

js:

1.input标签未放在form标签里面

解决办法：

把标签放入

表单里面。

    

        
        还没有账号？注册
    

2.input标签里的"type"属性未设置，默认为"submit"

原因：

由于submit会自动提交表单而ajax是局部刷新，在触发事件的同时表单提交，从而导致捕捉到事件的时候下的username和password都为空。

解决办法：

把里的"type"属性改为"button"。

    

        
        还没有账号？注册
    

3.引入js文件顺序错误

原因：

初学者写好js文件可能会直接在还未加载完html页面时就在头部引入自己写好的js文件。

解决办法

把引入js文件的位置挪到标签结束的前一行。

    

        
        还没有账号？注册
    

    
    

4.ajax下的根路径错误

解决办法：

找到url的根路径正确设置。

$.ajax({
        url:"/users/login",
        
})

5.window.location.href方法结构写错

解决办法：

 if (json.state === 200){
                alert("登录成功！即将跳转到主页...");
                window.location.href = "index.html";
            }else
                alert("登录失败！" + json.message);

附上笔者代码：

html:

    
        
        
        
        
        
        
        
    
    
        

            
用户登录
            
            

                
                    名字：
                    

                        
                    
                
                     密码：
                    

                        
                    
                
                    

                        
                        还没有账号？注册
                    
            
        
        
        
    

js:

$("#login").ready().click(function (){
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;
    if (username.replace(/\s*/g,"") === ""){
        alert("用户名不能为空！");
        return;
    }
    if (password.replace(/\s*/g,"") === ""){
        alert("密码不能为空！");
        return;
    }
    $.ajax({
        url:"/canteen/users/login",
        type:"post",
        data:$("#form-login").serialize(),
        dataType:"json",
        success:function (json){
            if (json.state === 200){
                alert("登录成功！即将跳转到主页...");
                window.location.href = "index.html";
            }else
                alert("登录失败！" + json.message);
        }
    })
})

以上就是笔者总结window.location.href页面不跳转的几种情况

如有错误，恳请指正！

如需转载，请标明出处。