Question

如何通过ajax联系我？

我想运行任何javascript函数，无需刷新页面或更改网址。

这是我的HTML：

<form action="mailer.php" method="post" class="contactform" />
  <input type="text" placeholder="Name" name="name" class="input-textarea"/>
  <input type="text" placeholder="Email" name="email" class="input-textarea"/>
  <textarea name="message" cols="8" rows="5" placeholder="Message"></textarea>
  <input name="Submit" type="submit" value="Submit" class="input-submit" />
</form>

这是我的PHP（mailer.php）：

<?PHP 
$to = "name@domain.com"; 
$subject = "Messsage from website";
$headers = "Name: Form Mailer";
$date = date ("l, F jS, Y"); 
$time = date ("h:i A"); 
$msg = "Message sent from website on date  $date, hour: $time.\n\n\n\n"; 
if ($_SERVER['REQUEST_METHOD'] == "POST") {
    foreach ($_POST as $key => $value) { 
        $msg .= ucfirst ($key) ." : ". $value . "\n\n"; 
    }
}
else {
    foreach ($_GET as $key => $value) { 
        $msg .= ucfirst ($key) ." : ". $value . "\n\n"; 
    }
}
mail($to, $subject, $msg); 
echo "<script>alert(\"test\")</script>"; 

?>

Answer 1

好吧，表格不应发布。事实上它根本不应该提交。

你想要做的是，在表单上有一个按钮（不是提交），然后使用一些javascript，这样当单击按钮时，有一个onclick处理程序，读取字段的值表单并通过Ajax请求将它们发送到php页面，然后显示“成功/失败”＃39;给用户。

这是一个使用jQuery的一般教程。很好，很容易遵循： http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

Answer 2

非常基本示例：

通过向某些元素添加ID来编辑您的表单：

<form class="contactform" id="contactform" />
  <input type="text" placeholder="Name" name="name" id="name" class="input-textarea"/>
  <input type="text" placeholder="Email" name="email" id="email" class="input-textarea"/>
  <textarea name="message" id="message" cols="8" rows="5" placeholder="Message"></textarea>
  <input name="Submit" type="submit" value="Submit" class="input-submit" id="submit_contact_form" />
</form>

JQuery Ajax请求（您需要包含JQuery才能使用它）：

$("#submit_contact_form").click(function() {
    $.ajax({
         url: "mailer.php",
         data: {
                 name: $('#name').val(), 
                 email: $('#email').val(), 
                 message: $('#message').val()
         },
         type: "POST",
         success: function(data) {
              console.log(data); //debug, do whatever here.              
         }
    })
});

Answer 3

让我向您展示ajax联系表单的基本示例。你可以用你想要的方式操纵

您的example.html文件

<script src="js/jquery.min.js"></script>
<form id="contactForm" action="/" method="post">
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="email" name="email">
<input type="text" placeholder="subject" name="subject">
<input type="text" placeholder="phone number" name="phonenum">
<input type="text" placeholder="message" name="message">
<input type="submit">
</form>
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#contactForm" ).submit(function( event ) {

  // Stop form from submitting normally
  event.preventDefault();

  // Get some values from elements on the page:
  var $form = $( this ),
     serializedData = $form.serialize(),
    url = $form.attr( "action" );

   request = $.ajax({
        url: "php-form.php",
        type: "post",
        data: serializedData
    });

    request.done(function (response, textStatus, jqXHR){
        // log a message to the console
        console.log(textStatus);
        $('#result').html(response);
    });

        // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });
});
</script>

PHP-form.php的

<?php


    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $num = $_POST['phonenum'];
    $msg = $_POST['message'];
    $formcontent=" From : $name \n Email : $email \n Subject : $subject \n Phone number : $num \n \n Message : $msg";
    $recipient = "ajeet.lakhani@hotmail.com";
    $mailheader = "From: $email \r\n";

    echo 'name:'.$name .'<br>email:' . $email . '<br>subject:'. $subject . '<br>number:' . $num . '<br>message:'. $msg;

    mail($recipient, $subject, $formcontent, $mailheader) or die("Error encountered! Please try again or write directly to the mentioned email address.");

?>

带有id结果的

div会让你对提交表格后发生的事情作出回应

如何与ajax联系

3 个答案: