Question

我有一个页面，我试图使用一些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文件中的脚本标记之间添加了ajax代码。我现在单独发布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 = "flash1996mph@hotmail.com";
$subject = "Abonee voor de nieuwsbrief";
$body = "$email \n Heeft zich aangemeld voor de nieuwsbrief";

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



?>
  </body>
</html>

我仍然是一个初学者，正在努力学习如果你能帮助我，我会很感激。

Answer 1

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

os.system

它应该是一个对象。对象具有data: { email = emailVal },对key: value而不是:。将其更改为：

最终守则：

data: {
  email: emailVal
},

Ajax成功消息

1 个答案: