jQuery Mobile and PHP login system not working
Question
I'm trying to create a login system for my jQuery mobile app but it's not doing anything after the login button is clicked. Right now I'm not using a db connection.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="jquery.mobile-1.1.0/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery.mobile-1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery.mobile-1.1.0/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#loginform').submit(function(){
$('#output').html('Connecting...');
var postTo = 'http://www.hedonsoft.com/game/login.php';
$.post(postTo,{userLbl: $('[name=username]').val(), passwordLbl: $('[name=password]').val()}, function (data){
if(data.message){
$('#output').html(data.message);
}else{
$('#output').html("Could not connect");
}
}, 'json');
return false;
});
});
</script>
<script src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="custom.css" />
</head>
<body>
<div data-role="page" id="mc_main">
<div data-role="header" id="header">
<h1>Main Menu</h1>
</div>
<div data-role="content">
<div data-role="collapsible" id="logindiv"><h2>Login</h2>
<form id="loginform" method="post">
<div data-role="fieldcontain">
<label for="user">Username:</label>
<input type="text" name="user" id="user" value="" />
</div>
<div data-role="fieldcontain">
<label for="pass">Password:</label>
<input name="pass" type="password" id="pass" value="">
</div>
<input type="submit" value="Login" data-icon="check" data-theme="a"/>
</form>
<div id="output"></div>
</div>
</div>
</body>
</html>
login.php
<?php
if(isset($_POST['username'] and isset($_POST['password'])) {
// do logic for logining in (usually query your db)
if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
$data['success'] = true;
$data['message'] = 'Login succesful';
} else {
$data['success'] = false;
$data['message'] = 'Login failed';
}
// return json
echo json_encode($data);
}
?>
I get 'Connecting...' in #output but that's it.
3 answers
solution1
4 2012-11-27 21:59:34
login.php代码的第2行出现语法错误。应显示为：
if(isset($_POST['userLbl']) && isset($_POST['passwordLbl']))
solution2
1 ACCPTED 2012-07-03 15:07:15
Your input name for the user field is "user".
Change your javascript to look like this
$.post(postTo,{userLbl:$('[name=user]').val(), ...
Then your login.php should looke like this:
<?php
if(isset($_POST['userLbl'] and isset($_POST['passwordLbl'])) {
// do logic for logining in (usually query your db)
if ($_POST['userLbl'] == 'test' and $_POST['passwordLbl'] == 'test') {
$data['success'] = true;
$data['message'] = 'Login succesful';
} else {
$data['success'] = false;
$data['message'] = 'Login failed';
}
// return json
echo json_encode($data);
}
?>
solution3
0 2012-07-03 15:42:09
Your server is returning an error 500. That's why it doesn't work!
You can check my fiddle if you want: http://jsfiddle.net/ooflorent/7cYae/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.