【问题标题】：Why is my AJAX method sending form input to the URL?为什么我的 AJAX 方法将表单输入发送到 URL？
【发布时间】：2021-07-11 07:35:18
【问题描述】：

一旦用户提交表单，我想使用 JQuery/AJAX 来阻止页面重定向/重新加载。

但是发生了什么，用户数据被刷新并显示在 URL 中——即使我使用的是 POST 方法！

我的landing.html 页面上有 2 个表单，但我只给出其中 1 个的编码：

看来我的问题出在我的 contactForm.js 中：

        $(function() {

      $("#contactUsForm input,#contactUsForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
          // additional error messages or events
        },
        submitSuccess: function($form, event) {
          event.preventDefault(); // prevent default submit behaviour
          // get values from FORM
          var name = $("input#c_fName").val();
          var email = $("input#c_email").val();
          var phone = $("input#c_phone").val();
          var message = $("textarea#c_message").val();
          var firstName = name; // For Success/Failure Message
          // Check for white space in name for Success/Fail message
          if (firstName.indexOf(' ') >= 0) {
            firstName = name.split(' ').slice(0, -1).join(' ');
          }
          
          $.ajax({
            url: "././forms/contactUsForm.php",
            type: "POST",
            data: {
              name: name,
              phone: phone,
              email: email,
              message: message
            },
            cache: false,
            success: function() {
              // Success message
              $('#c_success').html("<div class='alert alert-success'>");
              $('#c_success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
              $('#c_success > .alert-success')
                .append("<strong>Your message has been sent. </strong>");
              $('#c_success > .alert-success')
                .append('</div>');
              //clear all fields
              $('#contactUsForm').trigger("reset");
            },
            error: function() {
              // Fail message
              $('#c_success').html("<div class='alert alert-danger'>");
              $('#c_success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
              $('#c_success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
              $('#c_success > .alert-danger').append('</div>');
              //clear all fields
              $('#contactUsForm').trigger("reset");
            },
            complete: function() {
              setTimeout(function() {
                $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
              }, 1000);
            }
          });
        },
        filter: function() {
          return $(this).is(":visible");
        },
      });

      $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
      });
    });

    /*When clicking on Full hide fail/success boxes */
    $('#c_fName').focus(function() {
      $('#c_success').html('');
    });

landing.html：contactUsForm：

<form name="contactUsForm" id="contactUsForm" action="forms/contactUsForm.php" method="POST">
           
          <!--    First Name      -->
          <div class="control-group form-group col-12" >
            <div class="controls">
              <label for="c_fName">Full Name:</label>
              <input 
              type="text" 
              class="form-control" 
              id="c_fName" 
              name="c_fName" 
              required 
              data-validation-required-message="Please enter your full name.."
              placeholder="Johnny Smith">
            </div>
            
          </div>
          
          <!--   Phone Number      -->
          <div class="control-group form-group">
            <div class="controls">
              <label for="c_phone">Phone Number:</label>
              <input 
              type="tel" 
              class="form-control" 
              id="c_phone" 
              name="c_phone" 
              data-validation-required-message="Please enter your phone number." 
              placeholder="Example: 021 XXX XXXX...">
            </div>
          </div>
          
          <!--    Email Address      -->
          <div class="control-group form-group">
            <div class="controls">
              <label for="c_email">Email Address:</label>
              <input 
              type="email" 
              class="form-control" 
              id="c_email" 
              name="c_email" 
              required 
              data-validation-required-message="Please enter your email address." 
              placeholder="Example: jane.doe@email.com">
            </div>
          </div>
          
          <!--    Message      -->
          <div class="control-group form-group">
            <div class="controls">
              <label for="c_message">Message:</label>
              <textarea 
              rows="6" 
              cols="100" 
              class="form-control" 
              id="c_message" 
              name="c_message" 
              required 
              data-validation-required-message="Please enter your message" 
              maxlength="999" s
              tyle="resize:none" 
              placeholder="Please tell us about your enquiry...">
              </textarea>
            </div>
          </div>
          <div id="c_success"></div>
          
          
          <button 
          type="submit" 
          class="btn btn-primary" 
          id="sendMessageButton" 
          style="width: 100%;margin: auto" >
          Send Message</button>
          
          
        </form>

如果我不使用 AJAX，我的 contactUsForm.php 工作正常：

        <?php 
    $name = strip_tags(htmlspecialchars($_POST['c_fName']));
    $email_address = strip_tags(htmlspecialchars($_POST['c_email']));
    $phone = strip_tags(htmlspecialchars($_POST['c_phone']));
    $message = strip_tags(htmlspecialchars($_POST['c_message']));
       
    // Create the email and send the message
    $to = 'email@email.com'; 
    $email_subject = "Website Contact Form:  $name";
    $email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
    $headers = "From: email@email.com\n"; 
    $headers .= "Reply-To: $email_address";   
    mail($to,$email_subject,$email_body,$headers);
    return true;         
    ?>

如果我不使用 AJAX 功能，则提交表单，发送电子邮件并重定向页面（我不想要）

我一遍又一遍地编写这些表格来尝试解决这个问题。我制作的所有其他表单都可以与 AJAX 完美搭配。这些文件位于文件末尾：

<script src="assets/vendor/jquery/jquery.min.js"></script> 
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
<script src="assets/js/main.js"></script>         
<script src="js/jqBootstrapValidation.min.js" ></script><!--Used for other form-->
<script src="js/bookingForm.js"></script>
<script src="js/contactForm.js"></script>

【问题讨论】：

你所描述的听起来很像常规的表单提交，而不是 AJAX 调用。如果这是真的，你能在开发者工具栏的网络标签中验证吗？
@El_Vanja 我刚刚看了看，这正是正在发生的事情。它根本不运行 AJAX 代码。我也尝试在按钮本身上将代码调用为 onsubmit() 函数 - 但没有运气。
我从来没有用过jqBootstrapValidation，所以我不知道机制。您是否尝试过从其中记录某些内容以查看是否触发了任何处理程序（submitError 和 submitSuccess）？
在本地运行代码我在 $this is undefined 的 $.ajax complete 回调中收到错误。它适用于$(this)。您自己运行脚本时是否遇到任何其他控制台错误？
@Matt 你是明星！我的日志中也出现了这个错误，并应用了你的建议并且它工作得很好！！！我现在将发布我的日志和工作代码

标签： php jquery ajax forms post

【解决方案1】：

特别感谢@Matt 和@El_Vanja 提供帮助。我知道我自己发布答案是不正确的。但认为它会帮助任何未来遇到同样问题的开发人员。

根据@El_Vanja 的建议

我在每个运行的函数中添加了console.log 以查找问题。代码正在运行并且正在发送电子邮件，但表单数据未绑定到电子邮件。这是因为使用了不正确的变量名。

根据@Matt 的建议

代码正在运行，电子邮件与表单数据一起发送，但我仍然在 console.log 的 $.ajax complete 函数中收到 $this is undefined。然后我按照@Matt 的建议将$this 更改为$(this)。更新代码后，它的工作：

控制台日志

submitSuccess has started          contactUsForm.js:11:13
variables have been assigned       contactUsForm.js:20:14
Variable assignment complete       contactUsForm.js:24:14
AJAX Success is starting           contactUsForm.js:36:14

更新的contactUsForm.js

        $(function() {

      $("#contactUsForm input,#contactUsForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
          // additional error messages or events
          console.log('Error occured between line 5 - 8');
        },
        submitSuccess: function($form, event) {
            
            console.log('submitSuccess has started');
          event.preventDefault(); // prevent default submit behaviour
          // get values from FORM
          var c_fName = $("input#c_fName").val();
          var c_email = $("input#c_email").val();
          var c_phone = $("input#c_phone").val();
          var c_message = $("textarea#c_message").val();
          var firstName = name; // For Success/Failure Message
          // Check for white space in name for Success/Fail message
          console.log('variables have been assigned');
          if (firstName.indexOf(' ') >= 0) {
            firstName = c_fName.split(' ').slice(0, -1).join(' ');
          }
          console.log('Variable assignment complete');
          $.ajax({
            url: "././forms/contactUsForm.php",
            type: "POST",
            data: {
              c_fName: c_fName,
              c_phone: c_phone,
              c_email: c_email,
              c_message: c_message
            },
            cache: false,
            success: function() {
                console.log('AJAX Success is starting');
              // Success message
              $('#c_success').html("<div class='alert alert-success'>");
              $('#c_success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
              $('#c_success > .alert-success')
                .append("<strong>Your message has been sent. </strong>");
              $('#c_success > .alert-success')
                .append('</div>');
              //clear all fields
              $('#contactUsForm').trigger("reset");
            },
            error: function() {
              // Fail message
              console.log('AJAX error is occuring');
              $('#c_success').html("<div class='alert alert-danger'>");
              $('#c_success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append("</button>");
              $('#c_success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
              $('#c_success > .alert-danger').append('</div>');
              //clear all fields
              $('#contactUsForm').trigger("reset");
            },
            complete: function() {
              setTimeout(function() {
                $(this).prop("disabled", false); // Re-enable submit button when AJAX call is complete
              }, 1000);
            }
          });
        },
        filter: function() {
          return $(this).is(":visible");
        },
      });

      $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
      });
    });

    /*When clicking on Full hide fail/success boxes */
    $('#c_fName').focus(function() {
      $('#c_success').html('');
    });

contactUsForm.php 文件无需更改

【讨论】：