Javascript:需要表单在提交后从所有网站页面消失

Question

此表单存在于所有网站页面中。它应该在第一次提交后消失。 我想要使​​用浏览器基本功能的此代码的新版本

$.ajax({
    url: 'subscribe.php',
    type: 'post',
    data: {
        email : $("#inputemail").val()
    }
    success: function() {
        alert('Merci!')
    }
});

$("close").click(function(){
    $("#subscribe").hide();
});

<div id="subscribe" style="display:block">
<input type="text" name="email" placeholder="Email" id="inputemail"/>
<input type="submit" value="Ok" />
<span id="close">Fermer</span>
</div>

Answer 1

如果我正确理解你的问题，那么解决这个问题的一种方法是使用 XMLHttpRequest对象作为 jQuery 的替代品 .ajax()方法。使用 XMLHttpRequest 的配置如下所示，您应该发现此脚本的行为与当前 jQuery 依赖脚本的行为相同。

此外，在成功响应(即 status === 200 )时，此脚本将删除 <div />将文档中的字段/按钮括起来的元素，以实现所需的“隐藏”行为。

虽然较新的 fetch()现在API通常是首选，XMLHttpRequest此处使用对象来提高与旧版/基本浏览器的兼容性(这似乎是您的要求):

var div = document.getElementById('subscribe');
var email = document.getElementById('inputemail');
var submit = document.getElementById('submit');
var close = document.getElementById('close');

if(getCookie('hasSubmit')) {
    div.remove();
}

submit.addEventListener('click', function(event) {
  
  event.preventDefault();
    
  // Use xhr request for maximum compatbility with basic browsers
  var xhr = new XMLHttpRequest();  
  
  xhr.open("POST", 'subscribe.php', true);  
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() { 
  
    // If the post is successful
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { 
      // then remove (hide) the div
      div.remove();
      setCookie('hasSubmit', 'true', 365);
    }
  }
  
  // Send the post request
  xhr.send("email=" + email.value); 
});

close.addEventListener('click', function(event) {

    div.remove();
});

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

<div id="subscribe" style="display:block">
  <input type="text" name="email" placeholder="Email" id="inputemail"/>
  <input id="submit" type="submit" value="Ok" />
  <span id="close">Fermer</span>
</div>