用php提交表单数据而不重新加载页面？

Question

在我的个人作品集网页上，我有一个联系表格，是在朋友的帮助下用 PHP 制作的（在 PHP 方面我是个傻瓜。）

虽然我有一个问题。每当按下提交按钮并发送邮件时，都会重新加载页面。我该如何解决这个问题？

我已经复制（并更改了个人资料）我的所有表格，因为我不知道在哪里更改或更改什么：

<?php
    // define variables and set to empty values
    $nameErr = $emailErr = $commentErr = $subject = "";
    $name = $email = $comment = $subject = "";

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if (empty($_POST["name"])) {
        $nameErr = "Name is required";
      } else {
        $name = input($_POST["name"]);
      }

      if (empty($_POST["email"])) {
        $emailErr = "Email is required";
      } else {
        $email = input($_POST["email"]);
        // check if e-mail address is well-formed
              if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                $emailErr = "Invalid e-mail format"; }
      }

      if (empty($_POST["subject"])) {
        $subjectErr = "Subject is required";
      } else {
        $subject = input($_POST["subject"]);
      }

      if (empty($_POST["comment"])) {
        $commentErr = "Comment is required";
      } else {
        $comment = input($_POST["comment"]);
      }
}

// MailGun cURL API //
  $curl_post_data=array(
    'from'    => "$name <$email>",
    'to'      => 'my@mail.com',
    'subject' => $subject,
    'text'    => $comment,
);

  $service_url = 'mailgunlink.com';
  $curl = curl_init($service_url);
  curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
  curl_setopt($curl, CURLOPT_USERPWD, "api:key-123456789123456789abc");

  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_POST, true);

  curl_setopt($curl, CURLOPT_POSTFIELDS, $curl_post_data);
  curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);


  $curl_response = curl_exec($curl);
  $response = json_decode($curl_response);
  curl_close($curl);



// trim //
    function input($data) {
      $data = trim($data);
      $data = stripslashes($data);
      $data = htmlspecialchars($data);
      return $data;
    }

?>

    <section id="kontaktformular">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
  <div class="row" id="kontakt">
    <div class="six columns">
      <label>Full Name <span class="error">*<?php echo $nameErr;?></span></label>
      <input class="u-full-width" type="text" placeholder="Peter" name="name" id="navn">

    </div>
    <div class="six columns">
      <label>Your Email <span class="error">*<?php echo $emailErr;?></span></label>
      <input class="u-full-width" type="email" placeholder="Peter@Example.com" name="email" id="email">

    </div>

    <label>Subject <span class="error">*<?php echo $subjectErr;?></span></label>
    <input class="u-full-width" type="text" placeholder="Design" name="subject" id="subject">

    <label>Message <span class="error">*<?php echo $commentErr;?></span></label>
    <textarea class="u-full-width" placeholder="Whatever..." name="comment" id="besked"></textarea>

    </label>
    <input class="button-primary change" type="submit" value="Send">
  </div>
</form>
    </section>

我希望 sn-p 就足够了，即使它看起来像这样凌乱。 如果您需要更多信息，请随时对我大喊大叫。

另外，奖金问题。我还需要提交按钮来隐藏表单（显示：无；-> #kontaktformular）并显示另一个 div（显示：块；-> #feedbackmsg）

提前致谢！第一个问题最重要！

Answer 1

是的，在这种情况下，AJAX 就是您要寻找的答案：

向提交按钮添加一个 ID，例如。

    <input class="button-primary change" id="Kontakt_Submit" type="submit" value="Send">

然后接下来在你的js文件中写一段类似的代码

    jQuery("#Kontakt_Submit").click(function () {
      //serialize the data, in simple terms for you to understand, it will
      // get all the input element name value, then this data will be sent as POST DATA
      var data = jQuery('form').serialize();
      console.log('data-->' + data);
      $.ajax({
        type: 'POST',
        dataType: "json",
        url: 'ajax.php',
        data: {
            check: 'Kontakt_Form',
            Kontakt_Form_Data: data
        },
        success: function (data) {
        }
    });
});

接下来在你的 ajax.php 文件中添加这段代码

    if ($_POST['check'] == 'Kontakt_Form') {
         $result_array = array();
         $extracted_Array= array();                          // since we declared          both the variable names as "value" in JQuery
         parse_str($_POST['Kontakt_Form_Data'], $extracted_Array);
         $name= $extracted_Array['name'];
         $email= $extracted_Array['email'];
...//do the the other things what you need to do here, then enter in result array and return it for your output values if any.
}

希望这将帮助您以一种简单的方式了解您想要的设置。

Answer 2

我很确定这个问题已经被多次询问和回答。无论哪种方式，您都必须使用 AJAX，这很简单，一种方法是。

<section id="kontaktformular">
  <form id="kontaktform" method="post">
    <div class="row" id="kontakt">
      <div class="six columns">
        <label>Full Name <span class="error">*</span></label>
        <input class="u-full-width" type="text" placeholder="Peter" name="name" id="navn">

      </div>
      <div class="six columns">
        <label>Your Email <span class="error">*</span></label>
      </div>
      <label>Subject <span class="error">*</span></label>
      <input class="u-full-width" type="text" placeholder="Design" name="subject" id="subject">
      <label>Message <span class="error">*</span></label>
      <textarea class="u-full-width" placeholder="Whatever..." name="comment" id="besked"></textarea>

      </label>
      <input id="kontaktform_input" class="button-primary change" type="submit" value="Send">
    </div>
  </form>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$("#kontaktform").submit(function(e) {
  e.preventDefault(); // avoid to execute the actual submit of the form.
  $.ajax({
         type: "POST",
         data: $(this).serialize(), // serializes the form's elements.
         success: function(data)
         {
         }
       });
});
</script>