Question

我正在尝试允许此网站通过AJAX登录，但每当我点击submit按钮时都没有任何反应。这是代码，提前感谢。

$(document).ready(function() {
	
	var user, pass;
	
	function login(usrnm, pwd) {
		$.ajax({
			url: 'login.php?username=' + usrnm + '&password=' + pwd,
			type: 'POST',
			data: undefined,
			dataType: 'text',
			success: function (result) {
				alert(result);
			},
			error: function () {
				throw new Error("Error processing AJAX on function login().");
			}
		});
	}
	
	$("#bgFader").hide();
	
	$("#login").click(function() {
		$("#bgFader").show();
		
		jQuery("<div/>", {
			id: "loginBox",
		}).appendTo("body");
		
		$("#loginBox").html(
			'<span id = "loginBoxTitle">Login</span><br>'
			+ '<input type = "text" placeholder = "Username" id = "username"><br><br>'
			+ '<input type = "password" placeholder = "Password" id = "pwd"><br><br>'
			+ '<button id = "submitBttn">Submit</button>'
		);
		
		$("#loginBox").center();
	});
	
	$("#bgFader").click(function() {
		$("#loginBox").remove();
		
		$("#bgFader").hide();
	});
	
	$("#submitBttn").click(function() {
		user = $("#username").val();
		pass = $("#pwd").val();
		login(user, pass);
	});
	
});

#bgFader {
	opacity: 0.75;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: black;
}

#loginBox {
	border-radius: 3px;
	border: 2px solid black;
	background-color: #fbfbfb;
	padding: 10px;
}

#loginBoxTitle {
	font-size: 20px;
	font-weight: bold;
}

<!DOCTYPE HTML>
<HTML lang = "en">
	<head>
		<meta charset = "UTF-8">
		<title title = "">
			
		</title>
		<link rel = "apple-touch-icon" href = "">
		<link rel = "shortcut icon" href = "">
		<link rel = "stylesheet" type = "text/css" href = "main.css">
		<script type = "text/javascript" src = "https://code.jquery.com/jquery-3.1.1.js"></script>
		<script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.3.js"></script>
		<script type = "text/javascript" src = "main.js"></script>
	</head>
	<body>
		<button id = "login">Login</button>
		
		<div id = "bgFader">&nbsp;</div>
	</body>
</HTML>

Answer 1

将按钮的ID更改为submitBttn

<button id="submitBttn">Login</button>

Answer 2

Post方法应该是这样的

 $(function () {
            login('userName', 'Password');

            function login(usrnm, pwd) {
                var obj = {};
                obj.username = usrnm;
                obj.password = pwd;

                $.ajax({
                    url: 'Login.php',
                    type: 'POST',
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(result) {
                        alert(result.d);
                    },
                    error: function() {
                        throw new Error("Error processing AJAX on function login().");
                    }
                });
            }
        });

虽然我用asp.net网络表单测试了它...但它也应该没用PHP也是..你的请求被格式化转换为发布

Answer 3

在向login按钮点击添加提交按钮到DOM之前，您可以在将来的提交按钮中添加一个点击处理程序。

应该：

$(document).on('click', '#submitBttn', function() {
    user = $("#username").val();
    pass = $("#pwd").val();
    login(user, pass);
});

而不是

$("#submitBttn").click(function() {
    user = $("#username").val();
    pass = $("#pwd").val();
    login(user, pass);
});

为什么登录对话框不起作用？

3 个答案: