8
Tôi là người lập trình mới làm quen. Đối với dự án của tôi, tôi đang cố tạo biểu mẫu đăng nhập cho web di động bằng cách sử dụng json và ajax. Tôi đã thử tự mình kiểm tra mã từ hướng dẫn here.Cách đăng nhập bằng ajax và json cho ứng dụng di động hibrid
và đây là mã của tôi:
<!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>
với 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};
Nó chỉ đạo các dữ liệu với ajax để check.php trong cùng một máy chủ ở 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);
?>
Trong liên kết được cung cấp bởi hướng dẫn 'example' mã hoạt động tốt. Nhưng đối với tôi, tôi nhận được lỗi dưới đây khi tôi cố gắng thực hiện tương tự.
Lỗi mạng đã xảy ra, vui lòng thử lại!
Bất cứ ai có thể cho tôi biết mã của tôi có vấn đề gì không? và làm thế nào để thành công nếu tên người dùng và mật khẩu được xác thực với cơ sở dữ liệu MySQL?
Tôi đã khắc phục sự cố ngay bây giờ. Nhưng, trong trang thứ hai kết quả là "chào đón không xác định". Tôi nghĩ rằng kết quả user.name không được chứa bởi tên người dùng. Bất cứ ai có thể cho tôi biết bất kỳ chi tiết vấn đề và làm thế nào để sửa chữa nó? –