重新加载页面后显示警报

Question

我是初学者，只是学习如何编写代码，我尝试在提交表单然后重新加载页面后做一些通知，将显示alert-success bootstrap，这是代码

// 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();
});

更新解决方案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>

这是我的HTML

An error always show up when page reloaded in contact

每次重新加载页面时都会显示在我的页面中，而不是在点击提交按钮后显示

但是，当我运行该代码时，它只是首先显示bootstrap_alert然后重新加载页面。我怎么能首先重新加载页面然后显示bootstrap_alert？

Answer 1

解决方案1 ​​

在以编程方式重新加载时修改href的{​​{1}}，检查哈希片段（window）并决定显示警报。

onload

解决方案2

使用localStorage，但如果浏览器不支持(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(); } }); （几乎所有现代浏览器都支持），这将无效。

localStorage

Answer 2

有很多方法可以做到这一点。实现此目的的一种简单方法是通过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, " "));
}