使用Jquery/PHP创建不刷新的联系人表单

我是一个网络开发新手。大多数情况下，我是一名自由艺术家，试图制作自己的网络作品集。虽然我认识到学习代码基础知识的重要性，所以我一直在努力做到这一点。 目前，我与一个简单的PHP/HTML联系人表单处于僵持状态。我的HTML索引上有一些表单（这是一个单页站点），它们调用我的PHP文件将消息发送到我的电子邮件。正如您可能期望的那样，它看起来有点像这样： Index.html

Contactme.php

 <?php $name = $_POST['name'];
   $email = $_POST['email'];

$message = $_POST['message'];
$from = 'From: mywebsite.com'; 
$to = 'twocoffeespoons@gmail.com'; 
$subject = 'Hello';

$body = "From: $name\n E-Mail: $email\n Message:\n $message";

if ($_POST['submit']) {         
    if (mail ($to, $subject, $body, $from)) { 
  echo '<script language="javascript">';
  echo 'alert("message successfully sent")';
  echo '</script>';
  } else { 
  echo '<p>Something went wrong, go back and stry again!</p>'; 
  } 
}
?>

我想我了解基本情况，但我真的对我的状态不满意。当用户点击MySubmit按钮时，php脚本将运行，并将它们带到另一个页面。我知道我可以简单地将我的网站改为index.php，但我不愿意。即使这样，在我点击发送后，网站仍然会刷新。我已经看过了所有我能找到的东西，但是教程似乎真的过时了。 有人有什么建议吗？我想使用AJAX/JQuery将输入发送到我的php，而用户在不离开我的网站的情况下只会收到一个“您的消息已发送警报”。如果我的术语不正确或有点混乱，我很抱歉。就像我说的，我对这个问题很陌生，在过去的三天里一直在试图解决这个问题，但没有结果。

HTML

<input name="name" id="first" type="text" placeholder="First and last name">


  <input name="email" type="email" id="email" placeholder="Email address">


  <textarea id="message" name="message" placeholder="Your Message"></textarea>


  <input id="Submit" class="submit_btn" name="submit" type="submit" value="Submit">
  <span class="error" style="display:none">All Fields Are Required!</span>
  <span class="success" style="display:none">Contact Form Submitted Successfully</span>

---

试试这样的

$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
            //data: return data from server
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
    e.preventDefault(); //STOP default action
});

HTML代码

<form id="ajaxform" action="your_url_goes_here">
    .......
</form>

.......

-只需尝试此代码，它将帮助您以method=“POST”和action=“abc.php”的形式提交表单；

$("#ajaxform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
            //data: return data from server
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
    e.preventDefault(); //STOP default action
});

<form id="ajaxform" action="your_url_goes_here">
    .......
</form>

$("#formid").submit(function() {
    // your code
    return false; //return false also works..
});

 - just try this code it will help you , submit your form as method="POST" and action="abc.php";

<?php

if(isset($_POST['submit'])){

$to=$_POST['email'];


$from=$_POST['name'];


$message=$_POST['message'];





$headers = "From:" . $from;
mail($to,$message,$headers);
echo "Mail Sent.";
}
?>