Сообщение об успехе 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>

Я добавил АЯКС код между тегами сценария в HTML-файл. Теперь я буду размещать в одиночку Аякса:

<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 - это вызов, который будет пытаться запустить, как только страница загрузится. –

Это основная причина, вам нужно использовать хороший синтаксический маркер (Linter) и организовать (или отступать) ваш код. Это недопустимый синтаксис:

data: { 
    email = emailVal 
},

Предполагается, что это объект. Объекты имеют key: value пар с : и не =. Измените его на:

data: { 
    email: emailVal 
},

Final Код:

$.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

ответ

Смежные вопросы