-4
這是我code..where我要的那部分整合以及如何繼續......如何獲得在控制檯響應（JSON格式），同時擊中的URL
function validate() {
var un = document.loginscreen.uname.value;
var pw = document.loginscreen.psw.value;
var username = "John_Smith";
var password = "syntel123$";
if ((un == username) && (pw == password)) {
window.location = "file:///C:/Users/KS5034674/Desktop/Gagile/WebContent/homescreen.html";
return true;
} else {
console.log("login Failed");
}
}form {
width: 100%;
border: 0px solid #f1f1f1;
}
.container {
padding: 16px;
text-align: center;
}
input[type=text],
input[type=password] {
width: 100%;
height: 40%;
padding: 15px 10px 6px 9px;
margin-: 80px;
display: inline-tablecolumngroup;
border: 1px solid #ccc;
box-sizing: border-box;
}
#input_container {
position: absolute;
padding: 0 0 0 0px;
margin: 0 20px;
direction: ltr;
width: 80%;
}
#input {
height: 40px;
margin: 0;
width: 80%;
text-align: center;
}
#input_img {
position: absolute;
bottom: 10px;
left: 50px;
width: 20px;
height: 20px;
}
#input_container1 {
position: absolute;
padding: 0 0 0 0px;
margin: 0 20px;
direction: ltr;
width: 80%;
}
#input1 {
height: 40px;
margin: 0;
width: 80%;
text-align: center;
}
#input_img1 {
position: absolute;
bottom: 10px;
left: 50px;
width: 20px;
height: 20px;
}
button {
background-color: #0052A6;
color: white;
border: none;
cursor: pointer;
width: 70%;
height: 40px;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.syntel {
width: 40%;
border-radius: 0%;
}
img.agileimg {
width: 30%;
border-radius: 40%;
}
img.abc {
padding: 0 0px 0px 0px;
width: 20px;
height: 20px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<form name="loginscreen" onsubmit="return validate()" action="file:///C:/Users/KS5034674/Desktop/Gagile/WebContent/homescreen.html" method="post" >
<div class="imgcontainer">
<br> <br><br>
<img src=" C:\Users\KS5034674\Downloads\Gagile\project images\syntel.png" alt="syntel" class="syntel">
<br><br><br> <br>
<img src=" C:\Users\KS5034674\Downloads\Gagile\project images\agileimg.png" alt="agileimg" class="agileimg">
</div>
<br><br><br>
<div id="placeholder" align="center"></div>
<div class="container">
<div id="input_container">
<input type="text" id="input" placeholder="Username" name="uname" required style="border-radius:7px;">
<img src=" C:\Users\KS5034674\Downloads\Gagile\project images\username.png" id="input_img">
</div><br><br><br>
<div id="input_container1">
<input type="password" id="input1" placeholder="Password" name="psw" required style="border-radius:7px;">
<img src=" C:\Users\KS5034674\Downloads\Gagile\project images\password.png" id="input_img1">
</div>
</div>
<br><br>                 
<img src=" C:\Users\KS5034674\Downloads\Gagile\project images\check.png" class="abc">  <small>Remember me</small>
<br><br><br>
<div class="container">
<button type="submit" >Login</button><br><br><br><br><br><br>
</head>
</form>
</body>
</html>
請解釋一下你的問題 –
喜多並歡迎來到StackOverflow。有關如何提出問題，請參閱https://stackoverflow.com/help/how-to-ask這篇文章。請儘量簡化您的代碼，儘量減少您的需求，並且非常清楚您期望社區爲您提供的幫助。 – Iceman
@AmirMohsen實際上這是一個登錄屏幕UI代碼。現在我必須通過點擊一個網址來使用api來響應 –