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

我有一个联系人表单，在我的个人投资组合网页上，是用PHP和朋友帮助制作的（说到PHP，我是个傻瓜。）

虽然我有一个问题。每当按下submit按钮并发送邮件时，都会重新加载页面。我怎样才能解决这个问题

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

是的，在本例中，您需要的答案是AJAX：

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

接下来在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.
}

希望这将帮助您以一种简单的方式了解您想要的内容。
我很确定这个问题已经被多次询问和回答。无论采用哪种方法，您都必须使用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>


全名*
你的电子邮件*
主题*
信息*
$（“#kontaktform”）.submit（函数（e）{
e、 preventDefault（）；//避免执行表单的实际提交。
$.ajax({
类型：“POST”，
数据：$（this）.serialize（），//序列化窗体的元素。
成功：功能（数据）
{
}
});
});
AJAX？这就是路！曾经尝试过Ajax吗？谢谢大家，我一直在看，但是我在PHP方面真的是个哑巴，在jQuery方面只是个初学者。谢谢。（抱歉英语不好）你需要先阅读ajax教程…嗯，这不管用。我正在本地主机上测试这个-这有关系吗？我有jQuery是的，尽管它是另一个版本。看来你是对的。非常感谢你，先生！您能解释一下为什么要使用和旧的jQuery版本吗？我不应该使用1.7.1吗？好好工作，好好工作。现在“提交”按钮不会重新加载页面，但是检查电子邮件格式和是否所有字段都已填写都不起作用，再加上邮件未被发送的事实？呃，我不知道这是不是因为太晚了还是什么原因，但我现在丢了。但您谈论的是“我的”ajax.php和js文件。我所有的表单都写在.html文件中。我对js很满意，但我真的不知道如何使用ajax.php？和“../”执行您需要在此处执行的其他操作，然后输入结果数组并将其返回给您的输出值（如果有）。？很抱歉给您带来不便-我感谢您的帮助！我对php一窍不通。谢谢Carsten AndersenSo，你能帮我实现这个吗？我知道我已经把另一个答案标记为正确的，但它产生了新的问题——所以我再次放弃了它
    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.
}

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