我之前曾问过同样的问题，但我还没提供太多信息。 这次我指的是那个。 以下代表代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Design</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<script>
function validatelogin(){
$unme2=document.getElementById("inputlUsername3").value;
$lpwd2=document.getElementById("inputlPassword3").value;
if($unme2=="" || $lpwd2=="")
{
$("#errorDiv1").addClass('alert alert-danger');
$("#errorDiv1").html("Please fill all fields.");
return false;
}
else
{
//how to specify conditional php code here which i have written below this comment and check whether the particular username/password matches from the database?
<?php
$msg ="";
if(isset($_POST['submit']))
{
$uname=$_POST['txtuname'];
$pwd2=$_POST['txtpwd2'];
$con=mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("onlineshop",$con);
$r=mysql_query("select password from users where username='$uname'",$con);
$row = mysql_fetch_row($r);
$val=$row[0];
if($val!="")
{
if($pwd2==$val)
{
session_start();
$_SESSION['username']=$uname;
header("location:index.php");
}
else {
$msg="error";
}
}
else
{
$msg="Error";
}
}
?>
//how to represent the $msg value to javascript as $("#errorDiv1").html($msg);
}
}
</script>
</head>
<body style="padding-left: 10px;padding-right: 10px;">
<div>
<a href="#loginmodal" data-toggle=modal class=btn>Login</a>
</div>
<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" name="f1" action="index.php" id="loginform" onsubmit="return validatelogin();" method="post" role="form">
<div class="modal-header">
<h4><button class="close" data-dismiss="modal">×</button>Login</h4>
</div>
<div class="modal-body">
<div id="errorDiv1">
</div>
<div class="form-group">
<label for="inputUsername3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="txtuname" id="inputlUsername3" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="txtpwd2" class="form-control" id="inputlPassword3" placeholder="Password">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#registermodal" data-dismiss="modal" data-toggle="modal">Register Here</a>
<input type="submit" name="submit" class="btn btn-primary" value="Login">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
如果验证过程显示任何错误，那么该错误必须代表模态，并且该模式不应该被关闭。
每当用户按下登录按钮时，该消息应显示在模态上。 模式应该关闭，直到用户为该表单提供正确的用户名和密码。
答案 0 :(得分：1)
首先，不要将PHP代码放在<script>标记内。
该模式不应该被关闭
替换：<input type="submit" name="submit" class="btn btn-primary" value="Login">
收件人：<button type="button" class="btn btn-primary btn-login">Login</button>
因为当你提交时，它会重新加载并且正如预期的那样，模态将消失。
消息应显示在模态
上
使用AJAX：
将其添加到body元素的底部。
jQuery(function($) {
$('.btn-login').click(function() {
var post_url = 'Your_PHP_File_Here';
$.ajax({
type: 'POST',
url: post_url,
data: $('#loginform').serialize(),
dataType: 'html',
async: true,
success: function(data) {
$('#errorDiv1').append(data);
}
});
})
});
另外，在echo $msg;行之后在您的php中添加$msg = "some_message";。
答案 1 :(得分：0)
在这种情况下，我建议使用AJAX请求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Design</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#loginBtn").click(function(){
var userName = $("#inputlUsername3").val();
var password = $("#inputlPassword3").val();
if(userName && password) {
/*
response.txt is for demonstrate purpose.
You should change it to your server url and return true/false or
any other response as per your need
*/
$.ajax({url: "response.txt", success: function(result){
if(result === 'true') {
alert("Redirect it to dashboard");
} else {
alert("Show error");
}
}});
} else {
alert("Plz fill all the field");
}
});
});
</script>
</head>
<body style="padding-left: 10px;padding-right: 10px;">
<div>
<a href="#loginmodal" data-toggle=modal class=btn>Login</a>
</div>
<div class="modal fade" id="loginmodal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" name="f1" id="loginform" onsubmit="return false;" role="form">
<div class="modal-header">
<h4><button class="close" data-dismiss="modal">×</button>Login</h4>
</div>
<div class="modal-body">
<div id="errorDiv1" onload="check();">
<?php echo $msg ?>
</div>
<div class="form-group">
<label for="inputUsername3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" name="txtuname" id="inputlUsername3" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" name="txtpwd2" class="form-control" id="inputlPassword3" placeholder="Password">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#registermodal" data-dismiss="modal" data-toggle="modal">Register Here</a>
<input type="submit" name="submit" id="loginBtn" class="btn btn-primary" value="Login">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/X0Qrs84KNXRqWcgaisho?p=preview
注意：这仅用于演示，如何实现。您应该使用post post请求并将用户名和密码传递给服务器URL。
$.post("yourServerUrl.php",{username:userName,password:password},function(result){
//process request
});