用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> 

我希望该片段足够，即使看起来像这样混乱。 如果您需要更多信息，请随时对我大喊。

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

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

Answer 1

我很确定这个问题已经被提出并回答了多个。 两种方法都必须使用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>

Answer 2

是的，在这种情况下，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.
}

希望这将帮助您以一种简单的方式来理解所需的内容。