如何用submit button实现页面跳转

我想写个用GET方法的页面跳转。为什么点击提交网页不会跳到main.html 还是在 login.html。以及为什么用户和密码不是这个也会提交，萌新头有点秃。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Login</title>  
    <link rel="stylesheet" type="text/css" href="Login.css"/>   
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <script>
        $(function(){
            var uInput = document.getElementById('user');
            var pInput = document.getElementById('pass');
            user = uInput.value
            pass = pInput.value
            $("#btn").on("click",function(){
                if(user == 'jojo' %% pass == 'bean'){
                    jump1();
                }
                else{
                    alert("Please try again!!")
                }
            });
 
            return false;
        });
        function jump1(){
            url = "main.html?user="+user+"&pass="+pass;//此处拼接内容
            alert(url)
            window.location.href = url;
        }
    </script>
</head>  
<body>  
    <div id="login">  
        <h1>Login</h1>  
        <form name="form1">  
            <input type="username" required="required" placeholder="用户名" name="user" id='user'></input>  
            <input type="password" required="required" placeholder="密码" name="pass" id='pass'></input>  
            <button class="but" type="submit" id="btn">登录</button>  
        </form>  
    </div>  
</body>  
</html>

button点击之后自带默认提交行为，阻止默认事件试试..... 你这个代码图看起来太费眼了..

%% 是 && 符号吧

submit类型本身有提交操作你可以在form表单上加一个onsubmit事件里面如果不满足就事件不满足就return false

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Login</title>
		<link rel="stylesheet" type="text/css" href="Login.css" />
	</head>
	<body>
		<div id="login">
			<h1>Login</h1>
			<input type="username" required="required" placeholder="用户名" name="user" id='user'/>
			<form name="form1" onsubmit="return jump()">
				<input type="password" required="required" placeholder="密码" name="pass" id='pass'/>
				<input class="but" type="submit" value="提交"/>
			</form>
		</div>
	</body>
	<script src="js/jquery-3.0.0.min.js"></script>
	<script src="js/jquery.params.js"></script>
	<script>
		function jump() {
			var user = $("#user").val();
			var pass = $("#pass").val();
			if (user === '111' && pass === '111') {
				window.location.href = "main.html?user=" + user + "&pass=" + pass;
			} else {
				return false;
			}
		}
	</script>
</html>

望采纳