“无运输”错误将html联系表单提交到同一服务器上的php脚本

Question

我正在使用一个简单的html联系表单使用Ajax / jQuery（v 1.10.2）向php文件提交联系人详细信息。 php发送电子邮件并在成功时返回错误或“OK”。但是，当我单击“提交”按钮并且表单未提交时，我收到“无传输”错误。

我有一个带有id的html表单元素，我正在使用“$（'＃contactForm'）。在jQuery中提交”以提交表单。奇怪的是，它在过去的几天里可能工作了3到4次，所以它一次又一次地随机工作。我尝试不使用jQuery并直接向表单元素添加动作方法（form action =“inc / sendEmail.php”method =“post”），这样可行，但网页然后重定向到php文件，但我想留在HTML页面而不是重定向。 - 我搜索了ajax和“no transport”错误，大多数回复都提到了CORS，但我的js只是在同一台服务器上调用一个php脚本，所以它与CORS无关（可以吗？） - 几个月前这个工作正在运行，但我最近在域中添加了SSL，但我再也看不出这有什么不同，因为html，js和php都在同一台服务器上。

<form id="contactForm">
    <div class="col-md-6">
    <div class="form-group">
            <label for="InputName">Your Name</label>
            <div class="input-group">
                <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
            </div>
        </div>

        <div class="form-group">
            <label for="InputEmail">Your Email</label>
            <div class="input-group">
                <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required  >
                <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
            </div>
        </div>

        <div class="form-group">
            <label for="InputMessage">Message</label>
            <div class="input-group">
                <textarea name="InputMessage" id="InputMessage" class="form-control"  placeholder="Enter Email" rows="5" required></textarea>
                <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span>
            </div>
        </div>

        <input name="submit" type="submit" value="Submit" class="btn">
    </div>
</form>

---

$('#contactForm').submit(function(e) {
    e.preventDefault();

    var contactName = $('#contactForm #InputName').val();
    var contactEmail = $('#contactForm #InputEmail').val();
    var contactSubject = '';
    var contactMessage = $('#contactForm #InputMessage').val();
    var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
    '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;

    $.ajax({
        type: "POST",
        url: "inc/sendEmail.php",
        data: data,
        async: false,     
        success: function(msg) {
            // Message was sent
            if (msg == 'OK') {
                $('#message-warning').hide();
                $('#contactForm').fadeOut();
                $('#message-success').fadeIn();   
            }
            // There was an error
            else {
                $('#message-warning').html(msg);
            }
        },
        error: function (xhr, desc, err)
        {
            // GETTING "No Transport" ERROR HERE
            $('#message-warning').html('Error message: ' + err);
            $('#message-warning').fadeIn();
        }
    });

    return false;
});

---

<?php

$siteOwnersEmail = '[email protected]';

if($_POST) {

    $name = trim(stripslashes($_POST['contactName']));
    $email = trim(stripslashes($_POST['contactEmail']));
    $subject = trim(stripslashes($_POST['contactSubject']));
    $contact_message = trim(stripslashes($_POST['contactMessage']));

    // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
    // Subject
    if ($subject == '') { $subject = "Contact form submission"; }

    // Set Message
    $message .= "Email from: " . $name . "<br />";
    $message .= "Email address: " . $email . "<br />";
    $message .= "Message: <br />";
    $message .= $contact_message;
    $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

    // Set From: header
    $from =  $name . " <" . $email . ">";

    // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    if (!$error) {

        ini_set("sendmail_from", $siteOwnersEmail); // for windows server
        $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
        else { echo "Something went wrong. Please try again."; }

    } # end if - no validation error
    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;

        echo $response;
    } # end if - there was a validation error
}   
?>

我希望在输入字段有效时将表单提交给php脚本，如果从php返回OK消息，则应隐藏联系表单。但是，当我单击“提交”并且表单根本没有提交时（我在浏览器开发工具的“网络”面板中没有条目），我收到“无传输”错误。

Answer 1

好吧，我想我弄清楚了。看起来ajax通过SSL提交到php文件存在问题 - 即使php文件的路径是相对的，并且该站点已经在https上。我读到旧版本的jquery库可能有这个问题所以我升级到更高版本（1.10.2到1.11.3）似乎已经解决了这个问题。需要更多测试，但到目前为止看起来还不错。