Heim >Web-Frontend >HTML-Tutorial >Beispiel für eine HTML+JQuery-Anmeldung
In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von HTML und JQuery zum Erstellen von Anmeldewebseiten vorgestellt. Ich hoffe, dass er für alle hilfreich ist.
Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="../pagejs/bootstrap.min.js" ></script>
<script type="text/javascript" src="../pagejs/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="../pagecss/bootstrap.min.css"/>
<script type="text/javascript">
function showmsg(msgdata) {
$("#msginfo").hide();
$("#msginfo").html("<b>" + msgdata + "</b>");
$("#msginfo").show(1000);
}
$().ready(function() {
$("#login").click(function() {
var user = $("#inputEmail").val(); var pwd = $("#inputPassword").val(); if (user == "" || pwd == "") {
showmsg("please input email and password"); return;
}
$.post("login.do", {
email:user,
pwd:pwd
}, function(data, status){
if (data == "loginok") {
location.href = "welcome.jsp";
} else {
showmsg(data);
}
});
});
}) </script></head><body><p class="container">
<p class="row clearfix">
<p class="col-md-12 column">
<ul class="breadcrumb">
<li>
<a href="../index.html">Home</a>
</li>
<li class="active">
LOGIN </li>
</ul>
</p>
</p></p><p class="container">
<p class="row clearfix">
<p class="col-md-2 column">
<p style="height:100px;clear:both"></p>
<img alt="140x140" src="../image/icon.jpg" class="img-circle" style="width:160px;height:160px" />
</p>
<p class="col-md-6 column">
<p class="page-header">
<h1>
Welcome to Sp4 System </h1>
</p>
<form class="form-horizontal" role="form" id="login_form" action="login.do" method="post">
<p class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<p class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" name="email" />
</p>
</p>
<p class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<p class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" name="pwd" />
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<p class="checkbox">
<label><input type="checkbox" />Remember me</label>
</p>
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-2">
<button id="login" type="button" class="btn btn-default">Sign in</button>
</p>
<p class="col-sm-8">
<h4 id="msginfo"></h4>
</p>
</p>
</form>
</p>
<p class="col-md-4 column">
</p>
</p></p></body>
</html>Verwandte Empfehlungen:
So verwenden Sie JqueryAjax+php, um eine einfache Registrierungs-Anmeldeseite zu erstellen
Erstellen Sie eine einfache und schöne Anmeldeseite in HTML
Weiterleiten zur Anmeldeseite sofort nach dem Scheitern der Ajax+Session
Das obige ist der detaillierte Inhalt vonBeispiel für eine HTML+JQuery-Anmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!