Javascript 重新加载页面后显示警报

我是初学者，刚学会如何编写代码，我试着在提交表单后发出一些通知，然后重新加载页面，会显示警报成功引导，这是代码

// Bootstrap alert
bootstrap_alert = function() {}
bootstrap_alert.warning = function(message){
  $('#alert_placeholder').html('<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>').show(500).delay(3000).hide(500);
}

(function checkIfMsgSent() {
  if (typeof localStorage !== 'undefined') {
    var isMsgSent = JSON.parse(localStorage.getItem("messageSent")); // JSON.parse because we want a boolean

    if (isMsgSent) {
      alert('Message has been sent.');
      // bootstrap_alert.warning('Message has been sent.');
    }

    localStorage.removeItem('messageSent');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }
});

$('#sentcontact').on('click', function(){
  if (typeof localStorage !== 'undefined') {
    localStorage.setItem('messageSent', 'true');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }

  window.location.reload();
});

//引导警报
bootstrap_alert=function（）{}
引导\u alert.warning=功能（消息）{
$（'#警报占位符'）.html（'×；'+消息+''）.show（500）.delay（3000）.hide（500）；
}
（函数checkIfMsgSent（）{
if（localStorage的类型！=“未定义”）{
var ismsgssent=JSON.parse（localStorage.getItem（“messageSent”）；//JSON.parse，因为我们需要一个布尔值
如果（已发送）{
警报（'消息已发送'）；
//引导警报。警告（'消息已发送'）；
}
localStorage.removietem（'messageSent'）；
}否则{
//未定义本地存储
警报（“您的浏览器与此网站中的某些功能不兼容”）；
}
});
$（'#sentcontact'）。在（'click'，function（）上{
if（localStorage的类型！=“未定义”）{
setItem（'messageSent'，'true'）；
}否则{
//未定义本地存储
警报（“您的浏览器与此网站中的某些功能不兼容”）；
}
window.location.reload（）；
});

更新解决方案2使用的Javascript

<div class="container">
  <div id="alert_placeholder"></div>
</div>

<section class="contact_us">
  <div class="container">
    <form action="vanilla-form-contact.php" method="post">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="control-group">
              <label for="name" class="label-control">Name:</label>
              <input type="text" class="form-control" name="name" id="name" placeholder="Your name..." required>
            </div>
          </div>

          <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div class="control-group">
              <label for="email" class="label-control">Email:</label>
              <input type="email" class="form-control" name="email" id="email" placeholder="Your email..." required>
            </div>
          </div>

          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="control-group">
              <label for="subject" class="label-control">Subject:</label>
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Your subject..." required>
            </div>
          </div>

          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="control-group">
              <label for="message" class="label-control">Message:</label>
              <textarea name="message" id="message" cols="30" rows="10" placeholder="Messages..." class="form-control" required></textarea>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <img class="img-responsive" src="img/icon/contact.png" alt="Contact Icon">
            <div>
              <p class="title_contact">Contact:</p>
              <p class="contact_phone"><i class="fa fa-phone-square"></i> +000</p>
              <p class="contact_email"><i class="fa fa-envelope"></i> email@email.com</p>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <img class="img-responsive" src="img/icon/support.png" alt="Contact Icon">
            <div>
              <p class="title_contact">Support:</p>
              <p class="contact_phone"><i class="fa fa-envelope"></i> email@email.com</p>
              <p class="contact_email"></p>
            </div>
          </div>
        </div>
      </div>
      <button type="submit" class="btn-custom" data-dismiss="alert" id="sentcontact">Send It</button>
     </form>

姓名：
电邮：
主题：
信息：
联系人：
+000
email@email.com
支持：
email@email.com

发送它

这是我的html

每次我重新加载页面时，它总是显示在我的页面中，而不是在单击“提交”按钮之后

---

但是，当我运行该代码时，它只是先显示bootstrap_警报，然后重新加载页面。如何让它先重新加载页面，然后显示引导警报？

有很多方法可以做到这一点。实现这一点的简单方法是通过URL中的参数并在页面加载时检查它

// Check the URL parameter on page load
$(function(){
    if(getUrlParameter('success') == '1') {
       bootstrap_alert.warning('Message has been sent.');
    }
});

// Set up the click event
$('#sentcontact').on('click', function(){
  if (true){
    var nextUrl = window.location.href;
    nextUrl += (nextUrl.indexOf('?') === -1 ? '?' : '&') + 'success=1'
    window.location = nextUrl;
  }
});

// Simple function to read parameters out of the URL
function getUrlParameter(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

解决方案1 以编程方式重新加载时，修改

窗口的
href
，检查哈希片段（
onload
）并决定显示警报

(function checkIfMsgSent() {
  var url = window.location.href;
  if ((/#message_sent/).test(url)) {
    alert('Message has been sent.');
    // bootstrap_alert.warning('Message has been sent.');
  }
})();

$('#sentcontact').on('click', function(){
  if (true){
    window.location = window.location.href + "#message_sent";
    window.location.reload();
  }
});


解决方案2
使用，但如果浏览器不支持
localStorage
（几乎所有现代浏览器都有）

我可以看到两种可能性。您需要将状态存储在localstorage/cookie中，或者通过URL（查询字符串）传递参数，然后在页面加载时检查它。您能告诉我如何对其进行编码吗？我仍然无法在页面重新加载后显示我的消息控制台中出现任何错误？可能
bootstrap\u alert.warning未定义
？控制台中实际上没有任何错误，但它仍然没有显示。请将此添加到您的javascript中，并在单击发送按钮后将其输出到控制台：
$（function（）{console.log（window.location.href）；}）
在我编写代码之前，它总是在控制台中显示错误未捕获错误：语法错误，无法识别的表达式：.navbar nav li a[href*=#]：not（[href=#]），.site logo a[href*=#]：not（[href=#]）它从jquery.min.js:2调用错误，但您在控制台解决方案1中没有显示错误日志的代码是有效的，但我的警报通知总是在页面重新加载时显示，在表单中单击“提交”按钮时，如何使其在重新加载后显示？更新我在警报函数中重新加载页面时收到此消息（）{var url=window.location.href；if（/#message_sent/）{//alert（'message have sent'）；bootstrap_alert.warning（'message have sent.'）；}，为什么不直接显示“消息已发送”？它包括代码。明白了，只要你在网站url末尾发送了
#消息，就会显示警报。（这是解决方案1的副作用）。我建议您使用解决方案2，它是处理您的情况的更好、惯用和可靠的方法。如果答案有效，请接受。：）在你的第二条评论中，我看到一个输入错误，它不是
（/#message_sent/）
，它应该是
（/#message_sent/）.test（url）
。但是试试解决方案2。。这是我能想到的最好的了；）嗯，我在重新加载页面
×函数checkIfMsgSent（）{if（localStorage的类型！='undefined'）{var ismsgssent=JSON.parse（localStorage.getItem（“messageSent”）；//JSON.parse时收到了这条消息，因为我们需要一个布尔if（ismsgssent）{alert（'message haved'）；//bootstrap_alert.warning（'message haved'）；}localStorage.removeItem（'messageSent'）；}否则{//localStorage未定义警报（'您的浏览器与此网站中的某些功能不兼容'；}}
，即使我在不单击提交的情况下重新加载，它也始终显示该通知。我真的被困在这里了。。。
(function checkIfMsgSent() {
  if (typeof localStorage !== 'undefined') {
    var isMsgSent = JSON.parse(localStorage.getItem("messageSent")); // JSON.parse because we want a boolean

    if (isMsgSent) {
      alert('Message has been sent.');
      // bootstrap_alert.warning('Message has been sent.');
    }

    localStorage.removeItem('messageSent');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }
})();

$('#sentcontact').on('click', function(){
  if (typeof localStorage !== 'undefined') {
    localStorage.setItem('messageSent', 'true');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }

  window.location.reload();
});