Menu
I am a novice coder. For my project I am trying to make a login form for mobile web using json and ajax. I have tried to test the code from tutorial here by my self.
and this is my code:
<!DOCTYPE html>
<html>
<head>
<title>JQM Demo Login</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="libs/jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="libs/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h3>Login Page</h3>
</div>
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Username</label>
<input type="text" value="" name="username" id="username" class="ui-theme-b" />
</div>
<div data-role="fieldcontain">
<label for="username">Password</label>
<input type="password" value="" name="password" id="password" class="ui-theme-b" />
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Login">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h3>Welcome Page</h3>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
with javascript:
$(document).on('pageinit', '#login', function() {
$(document).on('click', '#submit', function() {
if ($('#username').val().length > 0 && $('#password').val().length > 0) {
$.ajax({
url: 'check.php',
data: {action: 'login', formData: $('#check-user').serialize()},
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
$.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible:true});
},
complete: function() {
$.mobile.loading('hide');
},
success: function(result) {
if (result.status) {
user.name = result.message;
$.mobile.changePage('#second');
} else {
alert('logon unsuccessful!');
}
},
error: function(request,error) {
alert('Network error has accurred please try again!');
}
});
} else {
alert('Please fill all necessary fields!');
}
return false;
});
});
$(document).on('pagebeforeshow', '#second', function() {
$.mobile.activePage.find('.ui-content').html('Welcome' + user.name);
});
var user = {name : null};
It's directing the data with ajax to check.php in the same server in localhost.
<?php
$action = $_POST['action'];
parse_str($_POST['formData'], $output);
$username = $output['username'];
$password = $output['password'];
$output = array('status' => true, 'message' => $username);
echo json_encode($output);
?>
In the link that provided by tutorial 'example' the code is working fine. But for me I am getting below error when I tried to implement the same.
Network error has occurred please try again!
Can anyone tell me what is wrong with my code? and how to make it success if the username and password authenticated with MySQL database?
724
Your JS code seems fine, I suggest you display the "error" for debugging Purpose. Try console.log(error) in the error method.
Anyways, the possible reasons could be:
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
