我正在尝试复制 AMP 网站以获取知识。
技术堆栈： AWS S3 静态托管网站、AWS Cloudfront、AWS EC2、AWS Elastic Beanstalk、Google Accelerated Mobile Pages (AMP)、Flask、JWT、CORS、MongoDb
There is a home.html page that contains a button to sign-in and a button to create account. When either button is clicked, a dialog box is opened and a login.html page is loaded.
The login.html page always displays the #create-container input fields regardless of which button is clicked.
How do I dynamically show or hide the containers based on a server response? Is there a way to emulate a .click event from a server response? Could I trigger the .showlogin click event from a server response? What would the server response need to return in order to trigger .showlogin?
我尝试从加载登录页面时调用的烧瓶端点返回以下内容：
return jsonify(
{'.showlogin': 'click'}
), 200
主页.html
<script id="amp-access" type="application/json">
{
"authorization": "https://example.com/auth?rid=READER_ID&url=CANONICAL_URL&clientId=CLIENT_ID(cart)&ref=DOCUMENT_REFERRER&_=RANDOM",
"pingback": "https://example.com/auth?rid=READER_ID&url=CANONICAL_URL&clientId=CLIENT_ID(cart)&ref=DOCUMENT_REFERRER&_=RANDOM",
"login": {
"sign-in": "/login?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"sign-up": "/sign-up?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM"
},
"authorizationFallbackResponse": {
"error": true,
"auth": true,
"loggedIn": false
}
}
</script>
<button class="menu_button atsackers pt9" on="tap:amp-access.login-sign-in">sign in</button>
<button class="menu_button atsackers pt9" on="tap:amp-access.login-sign-up">create account</button>
login.html（样式）：
#username-container {
display: none;
}
#password-container {
display: none;
}
#login-container {
display: none;
}
#create-container {
width: 100vw;
}
#contactResponse {
width: 250px;
margin: 10px auto;
}
#create-form {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
width: 100vw;
margin: 0 auto;
max-width: 550px;
}
.login_form {
width: 250px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin: 0 auto 10px auto;
}
login.html (脚本): :
$(document).ready(function(){
$("#create").click(function(){
console.log("create clicked");
$("#login-container").hide();
$("#create-container").show();
});
$("#login").click(function(){
console.log("login clicked");
$("#create-container").hide();
$("#login-container").show();
});
$("#reset_username").click(function(){
console.log("reset username clicked");
$("#login-container").hide();
$("#username-container").show();
});
$("#reset_password").click(function(){
console.log("reset password clicked");
$("#login-container").hide();
$("#password-container").show();
});
$(".showlogin").click(function(){
console.log(".showlogin clicked");
$("#create-container").hide();
$("#username-container").hide();
$("#password-container").hide();
$("#login-container").show();
});
});
<script>
//When the page has loaded.
$( document ).ready(function(){
//Perform Ajax request.
$.ajax({
url: 'https://example.api.com/get_create_info?clientId=' + getQueryStringValue("clientId"),
type: 'get',
success: function(data){
$('#create_email_field').val(data.email);
$('#create_firstname_field').val(data.firstName);
$('#create_lastname_field').val(data.lastName);
//If the success function is execute,
//then the Ajax request was successful.
//Add the data we received in our Ajax
//request to the "content" div.
}
});
});
</script>
login.html（正文）：
<div id="contactResponse" class="avenir pt8"></div>
<div id="username-container" class="login_form">
<form id="username-form">
...inputs...
</form>
</div>
<div id="password-container" class="login_form">
<form id="password-form">
...inputs...
</form>
</div>
<div id="login-container" class="login_form">
<form id="login-form">
...inputs...
</form>
</div>
<div id="create-container" class="login_form">
<form id="create-form">
...inputs...
</form>
</div>