Javascript:提交后需要从所有网站页面中消失的表格

问题描述 投票:0回答:1

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

$.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>
javascript html ajax
1个回答
1
投票

如果我正确理解你的问题,那么一种方法是使用XMLHttpRequest对象作为jQuerys .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>
© www.soinside.com 2019 - 2024. All rights reserved.