当我登录时，必须首先检查输入的用户名和密码是否与json文件中的数据匹配。 这不会发生。它会记录每个输入的用户名和密码。请让我知道我哪里出错了。
这是index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="css/Screen1.css">
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
<!-- <script type="text/javascript" src="js/Validation.js"></script>
--> <script type="text/javascript" src="js/AccountAuthentication.js"></script>
enter code here
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="">
<div data-role="header" class="ui-bar-a ui-page-theme-a ui-bar-inherit">
<h1>Login</h1>
</div>
<div data-role="main" class="ui-content">
<form id="UserLogin" class="ui-body ui-corner-all" data-ajax="false" method="get" action="HomePage.html">
<div data-role="fieldcontain">
<input type="text" name="uname" placeholder="Email address" id="uname" value=""/>
</div>
<div data-role="fieldcontain">
<input type="password" name="password" placeholder="Password" id="password" value="" />
</div>
<input type="submit" class="ui-btn ui-btn-inline ui-corner-all ui-shadow" name="submit" id="submit" value="Log In"/>
<!-- <a href="HomePage.html" class="ui-btn ui-btn-inline ui-corner-all ui-shadow" id="submit" data-ajax="false">Submit</a> -->
<a href="Register.html" class="ui-btn ui-btn-inline ui-corner-all ui-shadow ">Register</a>
</form>
</div>
<div data-role="footer" class="ui-bar-a ui-page-theme-a ui-bar-inherit" data-position="fixed">
<h6>2016</h6>
</div>
</div>
</body>
</html>
AccountAuthentication.js
$(document).ready(function(){
$("#submit").click(function(){
var uname = $('#uname').val();
var password = $('#password').val();
console.log("this is from form: "+uname);
console.log("this is from form: "+password);
alert(uname);
$.ajax({
type:"GET",
dataType:"json",
url:"json/validate.json",
success: function(data) {
alert("inside success");
$.each(data, function (key, value) {
console.log(value.uname);
if (value.uname != '' && value.password!='')
{
if(value.uname!=uname && value.password!=password)
alert("password correct");
return false;
}
});
},
error: function() {
}
});
});
});
validation.js
{
"uname": "pooja",
"password": "1234"
}
答案 0 :(得分：0)
你正试图＆＃34;返回false＆＃34;从ajax成功函数来看，由于ajax是异步的，你不会收到false。
不是从ajax成功函数返回值，而是从中调用一些函数并在该函数中编写所需的代码（Wether to login user or not）。
答案 1 :(得分：0)
因此，当您进行ajax调用时，响应是异步的，因此您的提交函数会运行，但它不会等待数据返回。虽然我不会以这种方式验证用户，但如果您想要遵循该路径，则可以将ajax请求设置为同步。并在数据恢复后做出决定。
$(document).ready(function(){
$("#submit").click(function(){
var uname = $('#uname').val();
var password = $('#password').val();
console.log("this is from form: "+uname);
console.log("this is from form: "+password);
var p = false;
$.ajax({
type:"GET",
dataType:"text",
url:"https://httpbin.org/get",
async : false, //This does what you want,
success: function(data) {
//Your if condition
p = true; //will submit the form
p = false; //will avoid submitting the form
},
error: function() {
}
});
return p; //Returns according to the validation
});
});
这是一个羽毛https://plnkr.co/edit/zA0ykahcaPbWT92n2Csu?p=preview
请注意，如果您将p设置为tru，则表单将提交。如果你把它设置为假它就不会。
希望有所帮助
答案 2 :(得分：0)
试试这个
（文档）$。就绪（函数（）{
$("#submit").click(function(){
var uname = $('#uname').val();
var password = $('#password').val();
console.log("this is from form: "+uname);
console.log("this is from form: "+password);
var obj=new Object();
obj.uname = uname ;
obj.password=password;
alert(uname);
$.ajax({
type:"GET",
dataType:"json",
data:obj,
url:"json/validate.json",
success: function(data) {
alert("inside success");
$.each(data, function (key, value) {
console.log(value.uname);
if (value.uname != '' && value.password!='')
{
if(value.uname!=uname && value.password!=password)
alert("password correct");
return false;
}
});
},
error: function() {
}
});
});
});