如何根据服务器的响应动态显示或隐藏 html

Question

我正在尝试复制AMP网站以获取知识

技术堆栈：AWS S3静态托管网站、AWS Cloudfront、AWS EC2、AWS Elastic Beanstalk、Google Accelerated Mobile Pages(AMP(、Flask、JWT、CORS、MongoDb

有一个home.html页面，其中包含一个用于登录的按钮和一个用于创建帐户的按钮。单击任一按钮后，将打开一个对话框，并加载login.html页面。

login.html页面始终显示#createcontainer输入字段，无论单击哪个按钮。

如何根据服务器响应动态显示或隐藏容器有没有办法从服务器响应中模拟.click事件？我可以从服务器响应中触发.showlogin单击事件吗？服务器响应需要返回什么才能触发.showlogin？

我尝试从加载登录页面时调用的烧瓶端点返回以下内容：

return jsonify(
{'.showlogin': 'click'}
), 200

home.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>

Answer 1

在成功块中使用jQueryhide和show方法。要隐藏div，只需使用$("#divId").hide();，要显示，请使用$("#divId").show();