0

我有一个问题，我想通过 AJAX 发送邮件，我的问题是我的表单一直在提交。出于某种原因，它会刷新 URL 中的所有表单，但我没有使用 GET 发送任何内容？

HTML：

<form onsubmit="ajaxEmail();
        return false;" >
    <input type="text" name="name" id="name" value="Name" maxlength="1000" onfocus="this.value = this.value == 'Name' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Name' : this.value;" />
    <input type="email" name="email" id="email" value="Email" maxlength="1000" onfocus="this.value = this.value == 'Email' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Email' : this.value;" />
    <input type="text" id="subject"  value="Subject" maxlength="2000" onfocus="this.value = this.value == 'Subject' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Subject' : this.value;" />
    <textarea name="Message" id="body" maxlength="40000" onfocus="this.value = this.value == 'Message' ? '' : this.value;" onblur="this.value = this.value == '' ? 'Message' : this.value;">Message</textarea>
    <input type="submit" value="send" class="submit-button"/>
</form>

JS：

$(function ajaxEmail() {
    $('#emailMsgResp').hide();
    $('#emailMsgBody').hide();

    var name = $('#name').val();
    var emailForm = $('#email').val();
    var subject = $('#subject').val();
    var message = $('#body').val();

    $.ajax({
        type: "POST", // Can be "GET"
        url: "../ajaxMail.php",
        data: {
        name: name,
        emailFrom: emailFrom,
        subject: subject,
        message: message
    },
    dataType: "json",
    success: function (data) {

        if (data['response'] == 1) {

            $('#emailMsgResp').show();
            $('#emailMsgResp').append('<div class="skill3" id="emailMsgBody" style="width:325px; height: 38px; margin: 0px auto;"><p>Thank you for contacting me' + data['response'] + '</p></div>');
            return false;

        } else if (data['response'] == 0) {

            $('#emailMsgResp').show();
            $('#emailMsgResp').append('<div class="skill3" id="emailMsgBody" style="width:325px; height: 38px; margin: 0px auto;"><p>Error: Please use your own client and write to contact@ivan-ristic.com</p></div>');
            return false;
        }
    }
    });
    return false;
});

ajaxMail.php

$email_it_to = 'mymail@mymail.com';

$name = $_POST['name'];
$email_from = $_POST['emailFrom'];
$subject = $_POST['subject'];
$body = $_POST['message'];

if(!isset($name) || !isset($email_from) || !isset($subject) || !isset($body)) {
    $response = 0;

} else {

    $email_from = $email;
    $email_subject = "Contact Form: ".stripslashes($subject);
    $email_message = "Below is a message submitted by '".stripslashes($name);
    $email_message .="' on ".date("d/m/Y")." at ".date("H:i")."\n\n";
    $email_message .= stripslashes($body);

    $headers = 'From: '.$email_from."\r\n" .

    'Reply-To: '.$email_from."\r\n" .
    'X-Mailer: PHP/' . phpversion();

    if (mail($email_it_to, $email_subject, $email_message, $headers)) {

        $response = 1;
    } else {

        $response = 0;
    }
}

echo json_encode($response);
4

1 回答 1

7

您将您的函数分配为文档就绪处理程序，因此一旦页面准备就绪，它就会被调用。你有：

$(function ajaxEmail() {
   /* your code */
});

...相当于：

$(document).ready(function ajaxEmail() {
    /* your code */
});

你应该拥有的：

function ajaxEmail() {
   /* your code */
}

这将使您的函数成为可以从内联事件属性调用的全局函数。

或者，既然您仍然使用 jQuery，onsubmit=...请从表单中删除内联处理程序并使用 jQuery 分配它：

$(function() {
    $("form").submit(function(e) {
        e.preventDefault();

        /* your other function contents here */
    });
});

当然，最好为您的表单提供一个 id 属性并使用$("#yourFormId").submit(...)而不是使用$("form").submit(...)（它将相同的处理程序分配给页面上的所有表单）。

于 2013-06-01T02:45:32.003 回答