首页 > 解决方案 > “无传输”错误将 html 联系表单提交到同一服务器上的 php 脚本

问题描述

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

我有一个带有 id 的 html 表单元素,我在 jQuery 中使用“$('#contactForm').submit”来提交表单。奇怪的是,它在过去的几天里可能工作了 3 或 4 次,所以它时不时地随机工作。我尝试不使用 jQuery 并将操作方法​​直接添加到表单元素(form action="inc/sendEmail.php" method="post")并且这有效,但是网页然后重定向到 php 文件但我想留在html页面上而不是重定向。
- 我搜索了 ajax 和“无传输”错误,大多数回复都提到了 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 = 'abc@xyz.com';

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.ini 返回 OK 消息,则应该隐藏联系表单。但是,当我单击提交并且根本没有提交表单时出现“无传输”错误(浏览器开发工具的“网络”面板中没有条目)。

标签: phpjqueryhtml

解决方案


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


推荐阅读