Ajax成功消息

我有一个页面，我试图使用一些Ajax输出成功消息。成功消息必须位于同一页面上。Ajax成功消息

我在网上发现了这段代码并对其进行了更改，但由于某种原因，它无法正常工作。

我的HTML：

<!DOCTYPE HTML> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Scroll to top</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <!--  MENU --> 
    <header> 
    <div class="headerBar"> 
     <a href="/"> 
     <img class="logo-small" src="img/logo-vdb-small.svg" alt="Logo"> 
     </a> 
     <button class="menuBtn menuBtn-htx"> 
     <span>toggle menu</span> 
     </button> 
    </div> 
    <nav> 
     <ul> 
     <li><a href="index.php">Home</a> 
     </li> 
     <li><a href="over.php">Over ons</a> 
     </li> 
     <li><a href="diensten.php">Diensten</a> 
     </li> 
     <li><a href="vacatures.php">Vacatures</a> 
     </li> 
     <li><a href="portfolio.php">Portfolio</a> 
     </li> 
     <li><a href="contact.php">Contact</a> 
     </li> 
     </ul> 
    </nav> 
    <!-- Menu animation --> 
    <script> 
     $('.menuBtn').click(function(e) { 
     e.preventDefault(); 
     (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active'); 
     $('nav').slideToggle(); 
     }); 
    </script> 
    </header> 


    <!-- slider --> 
    <script type="text/javascript" src="slider/slick/slick.min.js"></script> 
    <script type="text/javascript" src="slider/slick/slides.js"></script> 
    <link rel="stylesheet" type="text/css" href="slider/slick/slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slider/slick/slick-theme.css" /> 
</head> 

<body> 

    <div id="container"> 

    <div class="textboxblack"> 
     <cms:editable name='page_title' label='Pagina titel' type='text'> 
     <h1>WHO WE ARE</h1> 
     </cms:editable> 

    </div> 

    <div class="textboxwhite"> 

     <cms:editable name='icon_1' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'> 
     <i class="fa fa-home fa-3x" aria-hidden="true"></i> 
     </cms:editable> 

     <cms:editable name='title_1' label='Content titel' type='richtext'> 
     <h2>Onze historie</h2> 
     </cms:editable> 

     <div class="divider-black"></div> 

     <cms:editable name='content_1' label='Content' type='richtext'> 

     <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum. Nulla tincidunt felis quis fringilla gravida. Nam fermentum ornare aliquam. 
      Aliquam rutrum tortor nunc. Nulla ut tincidunt risus. Nunc commodo, neque eget venenatis finibus, tortor sem posuere eros, sed interdum nisl eros non leo. Mauris eu feugiat magna.Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. 
      Donec augue lorem.</p> 

     <div class="round-image"> 
      <img src="img/3.jpg" alt="" height="260" width="260" /> 
     </div> 


     <p class="italic-15">Sed interdum nisl eros non leo. Mauris eu feugiat magna.Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem.</p> 

     </cms:editable> 


    </div> 

    <div class="textboxblack"> 
     <cms:editable name='icon_2' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'> 
     <i class="fa fa-trophy fa-3x" aria-hidden="true"></i> 
     </cms:editable> 

     <cms:editable name='title_2' label='Content titel' type='richtext'> 

     <h2>Awards</h2> 

     </cms:editable> 

     <div class="divider-white"></div> 
     <cms:editable name='content_2' label='Content' type='richtext'> 
     <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum. Nulla tincidunt felis quis fringilla gravida.</p> 
     </cms:editable> 
    </div> 


    <div class="textboxwhite"> 
     <cms:editable name='icon_3' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'> 

     <i class="fa fa-leaf fa-3x" aria-hidden="true"></i> 
     </cms:editable> 
     <cms:editable name='title_3' label='Content titel' type='richtext'> 

     <h2>Duurzaam</h2> 
     </cms:editable> 

     <div class="divider-black"></div> 
     <cms:editable name='content_3' label='Content' type='richtext'> 
     <p class="italic-15">Lorem ipsum's dolor onzin teksten, consectetur adipiscing elit. Donec augue lorem, laoreet in lacus eu, aliquet porttitor ante. Fusce vel orci id mauris elementum vestibulum.</p> 
     </cms:editable> 
    </div> 
    <div class="textboxblack"> 
     <cms:editable name='icon_4' label='Content icon' desc='Icoontjes kan je hier vinden:http://fontawesome.io/icons/' type='text'> 


     <i class="fa fa-heart fa-3x" aria-hidden="true"></i> 
     </cms:editable> 

     <cms:editable name='title_4' label='Content titel' type='richtext'> 


     <h2>We work for</h2> 
     </cms:editable> 
     <div class="divider-white"></div> 



     <div class="slider" style="image-size:cover;"> 
     <div> 

      <p class="italic-15">K.N.V.B</p> 

     </div> 
     <div> 

      <p class="italic-15">HEMA</p> 

     </div> 
     <div> 

      <p class="italic-15">ETOS</p> 

     </div> 
     <div> 

      <p class="italic-15">EN MEER</p> 

     </div> 
     </div> 


    </div> 
    <div class="textboxwhite"> 


     <cms:editable name='title_5' label='Content titel' type='richtext'> 




     <h2>Op de hoogte blijven</h2> 
     </cms:editable> 
     <cms:editable name='content_5' label='Content' type='richtext'> 


     <p class="italic-15">Lorem ipsum's dolor onzin teksten.</p> 
     </cms:editable> 
    </div> 

    <form class="subscribe" action="subscribe.php" method="POST"> 
     <input type="email" name="subscribefield" required="true" placeholder="Awe" /> 
     <button type="submit"><i class="fa fa-paper-plane fa-lg" aria-hidden="true"></i> 
     </button> 
    </form> 

    <script> 
     $.ajax({ 
     url: 'subscribe.php', 
     data: { 
      email = emailVal 
     }, 
     type: 'post', 
     success: function(output) { 
      //do whatever after the POST is successful 
      alert("AJAX request successfully completed"); 
     } 
     }); 
    </script> 


    <div id="footer-top"> 
     <div class="contact-text"> 
     <i class="fa fa-map-marker fa-2x" aria-hidden="true"></i> 
     </br> 
     <div class="divider-white"></div> 
     <p class="italic-12">Vivamus sagittis lacus vel augue laoreet.</p> 
     <p class="italic-12">Vivamus sagittis lacus.</p> 
     <p class="italic-12">Vivamus sagittis lacus vel augue laoreet.</p> 
     </div> 
     <div id="contact"> 
     <i class="fa fa-envelope fa-lg custom1"></i> 
     <i class="fa fa-phone fa-lg custom2"></i> 

     </div> 
    </div> 
    <!-- End top footer --> 
    <!-- bottom footer --> 
    <div id="footer-bottom"> 
     <i class="fa fa-facebook"></i> 
     <i class="fa fa-twitter" aria-hidden="true"></i> 
     <i class="fa fa-linkedin" aria-hidden="true"></i> 

    </div> 
    </div> 
</body> 

</html>

我添加脚本标记之间的Ajax代码在HTML文件中。我现在将发布单独的ajax：

<script> 
    $.ajax({ 
    url: 'subscribe.php', 
    data: { 
     email = emailVal 
    }, 
    type: 'post', 
    success: function(output) { 
     //do whatever after the POST is successful 
     alert("AJAX request successfully completed"); 
    } 
    }); 
</script>

最后PHP：

<?php 
header("Refresh:7; url=contact.php"); 
?> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    </head> 
    <body> 
    <?php 

$email = $_POST['subscribefield']; 

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { 
echo "<center><div class=\"textboxwhite\"><p>Dit adres klopt niet</p></div></center>"; 
die(); 
} 


$to = "[email protected]"; 
$subject = "Abonee voor de nieuwsbrief"; 
$body = "$email \n Heeft zich aangemeld voor de nieuwsbrief"; 

mail($to, $subject, $body); 



?> 
    </body> 
</html>

我还在努力学习我会很感激，如果你能帮我出一个初学者。

来源

2016-06-09 Kevin

'emailVal'在代码中未定义！并用它作为'data：{ email：emailVal}，' – Saty

我会从修复无效标记开始（标头是一个内容元素 - 它放在正文中），然后将$ .ajax调用放入事件中处理程序（我假设它将用于表单的提交事件） - 就像它那样，ajax是调用会在页面加载后立即尝试运行。 –

这是主要原因，您需要使用一个好的Syntax Highlighter（Linter）并组织（或缩进）您的代码。这是一种无效的语法：

data: { 
    email = emailVal 
},

它应该是一个对象。对象的key: value对与:而不是=。将其更改为：

data: { 
    email: emailVal 
},

终极密码：

$.ajax({ 
    url: 'subscribe.php', 
    data: { 
    email: emailVal     // Change here... 
    }, 
    type: 'post', 
    success: function(output) { 
    //do whatever after the POST is successful 
    alert("AJAX request successfully completed"); 
    } 
});

来源

2016-06-09 08:02:19

哦，但后我点击按钮，我仍然得到什么，但空白页。 – Kevin

@KevinAartsen URL是否改变？ –

是的，它会subscribe.php – Kevin

Ajax成功消息

回答

相关问题