Question

我希望CORS会发生这种情况，但我真的想在同一个域中尝试某些东西而且我不知所措。

我简单的html表单：

<form action="" method="post" class="wpcf7-form contact-form">
            <div class="contact-input-fields">
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="name">Name*</label>
                  <input type="text" id="name" name="name" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="email">Email*</label>
                  <input type="email" id="email" name="email" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
              <p>
                <span class="wpcf7-form-control-wrap">
                  <label for="subject">Subject*</label>
                  <input type="text" id="subject" name="subject" value="" class="wpcf7-form-control" required="">
                </span>
              </p>
            </div><!-- /.contact-input-fields -->

            <p>
              <span class="wpcf7-form-control-wrap">
                <label for="message">Message*</label>
                <textarea id="message" name="message" class="wpcf7-form-control" required=""></textarea>
              </span>
            </p>

            <p class="choose-table-form"> 
              <input type="submit" id="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit" style="max-width:100%;"> 
            </p>
          </form><!-- /.contact-form -->

这是我的javascript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
        $(".success").hide();
        $("#submit").click(function() {
            var data = {
                name: $("#name").val(),
                email: $("#email").val(),
                subject: $("#subject").val(),
                message: $("#message").val()
            };

            $.ajax({
                url: "forms/contactForm.php",
                type: "POST",
                data: data,
                success: function(data){
                    $(".success").fadeIn(1000);
                }
            });
        });
    });
  </script>

和我的PHP：

<?php
if($_POST){
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    $msg = "Name: ".$name."\nEmail: ".$email."\Subject: ".$subject."\nMessage: ".$message;

//send email
    mail("email@domain.com", "Message" .$email, $msg);
}

我没有看到任何错误，但每次按下＆＃34;提交＆＃34;并触发ajax调用我得到＆＃34; 405 Not Allowed＆＃34;。

我已经在这里查看了其他答案，但他们主要与CORS有关。

Answer 1

我没有看到任何包含success类的div，因此您需要将其添加到HTML中，我使用了bootstrap，因此它使用了alert-success

<div class="alert-success">Done!</div>

在你的jQuery代码中，使用preventDefault();和php文件的完整URL

$(".alert-success").hide();
$("#submit").click(function(e) {
        e.preventDefault();
        var data = {
            name: $("#name").val(),
            email: $("#email").val(),
            subject: $("#subject").val(),
            message: $("#message").val()
        };

        $.ajax({
            url: "http://localhost/jquery/forms/contactForm.php",
            type: "POST",
            data: data,
            success: function(data){
                $(".alert-success").fadeIn(1000);
            }
        });
    });

此外，请确保您在服务器中进行测试，无论是使用wamp还是xampp的localhost，还是在实时服务器上。

获得＆＃34; 405不允许＆＃34;在对同一域进行Ajax发布请求之后

1 个答案: