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>

Javascript：提交后需要表格从所有网站页面上消失

1 个答案: