Question

我有一个nodejs文件，该文件渲染了一个ejs文件，我需要在成功渲染后显示一个甜蜜的警报？当前我收到了显示“未定义警报”的错误这是我的EJS COE

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<link rel='stylesheet' href='cdnjs.cloudflare.com/ajax/…'> 
<link rel="stylesheet" href="/css/style.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> 
</head> 
<body> 
<div class="verify"> 
<form id="checkForm" method="post" action="/verify"> 
<label for="verify"><b>Verify</b></label> 
<input type="text" placeholder="Register no" name="emply_id" required> 
<button type="submit" class="signupbtn">Check In</button> 
</form> 
</div> 
<!--<form id="signp" method="get" action="/signup"> 
<button type="submit" class="signupbtn" >Signup</button> 
</form>--> 

<div class="container" id="container"> 
<div class="form-container sign-up-container"> 
<form id="signupForm" method="post" action="/signup"> 
<h1>Create Account</h1> 
<div class="social-container"> 
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> 
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> 
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> 
</div> 
<span>or use your email for registration</span> 
<input type="text" placeholder="Company Name" name="name"required/> 
<input type="email" placeholder="Email" name="email" required/> 
<input type="password" placeholder="Password" name="psw" required/> 
<input type="password" placeholder="Re-Password" name="pswrepeat" required/> 
<input type="address" placeholder="Addresss" name="address" required/> 

<button id="myButton">Sign Up</button> 
</form> 
</div> 
<div class="form-container sign-in-container"> 
<form id="loginForm" method="post" action="/login"> 
<h1>Sign in</h1> 
<div class="social-container"> 
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> 
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a> 
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> 
</div> 
<span>or use your account</span> 
<h1>Log in </h1> 
<hr> 
<label for="email"><b>email</b></label> 
<input type="text" placeholder="Email" name="email" required > 
<label for="password"><b>password</b></label> 
<input type="text" placeholder="Enter Password" name="password" required> 
<button type="submit" class="signupbtn">Log in</button> 
</form> 
</div> 

<div class="overlay-container"> 
<div class="overlay"> 
<div class="overlay-panel overlay-left"> 
<h1>Welcome Back!</h1> 
<p>To keep connected with us please login with your personal info</p> 
<button class="ghost" id="signIn">Sign In</button> 
</div> 
<div class="overlay-panel overlay-right"> 
<h1>Hello, Friend!</h1> 
<p>Enter your personal details and start journey with us</p> 
<button class="ghost" id="signUp">Sign Up</button> 
</div> 
</div> 
</div> 
</div> 


<script src="/js/index.js"></script> 

<script> 

$(document).ready(function () { 
if ("<%= alert %>" === "true") { 
var alertTitle = "<%= alertTitle %>" 
var alertMessage = "<%= alertMessage %>" 
swal(alertTitle, alertMessage, "error"); 
} 
}) 





</script> 


</body> 
</html>

这是我的NODEJS代码

app.post('/signup',urlencodedParser,async function(req,res){ 
//console.log(req) 
var name1 = req.body.name; 
var email1 = req.body.email; 
var pass = req.body.psw; 
var con_pass = req.body.pswrepeat; 
var address1 = req.body.address; 
var stat =0; 
var echeck = await emailcheck(email1) 
console.log(echeck) 
var sig ={name:name1,email:email1,password:pass,password1:con_pass,address:address1,status:stat} 
console.log(name1); 
if(con_pass == pass){ 
var cd = sha256(email1) 
//res.end("sigup submitted"); 
//res.render('login'); 

var query = db.query('INSERT INTO signup SET ?', sig, async function(err, result) { 
// Neat! 

console.log(query.sql); 
var activationinsert = await activation_insert(cd) 
console.log(activationinsert) 
var link="http://"+req.get('host')+"/emaillogin?code="+cd; 
var actmail = await activation_mail(email1,link) 
console.log(actmail) 
console.log("get me sweet"); 
res.render('login', {alert: true, alertTitle: "Oops!", alertMessage: "Something went wrong!"})  

// }); 
});

我已经使用了这种方法，该标记方法在html中可以正常工作，但是当涉及到js时，它是一团糟。

Answer 1

将页面呈现为字符串时，在app.render中传递参数将可用。也可以在<script>标签内使用。您的代码如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      $(document).ready(function () {
        if ("<%= alert %>" === "true") {
          var alertTitle = "<%= alertTitle %>"
          var alertMessage = "<%= alertMessage %>"
          swal(alertTitle, alertMessage, "error");
        }
      })
    </script>
  </body>
</html>

Answer 2

需要注意的几件事：

避免使用保留的JS关键字，例如alert，这只会使您头痛，并且随着代码库的增长而出现看不见的错误。
您正在使用正确的语法在行中除if条件之外的所有地方访问变量

if (alert === true) {

尝试将其更改为：

if(<%= alert === true %>) {

如何在我的ejs文件成功输出上添加sweetalert？

2 个答案: