ajax 'url' 问题（我认为）

Question

在使用 ajax 提交表单时遇到问题。我正在尝试使用 jquery/ajax 提交“联系人”表单。我在网上获得了一些代码，并希望根据我的需要对其进行定制。似乎 ajax 函数的 'url' 参数不能正常工作。当我输入 php 代码的完整 url 时，ajax 会抛出并出错，但是当我输入假 url 时，ajax 代码会执行（显然，没有发送任何信息）。所以，让我展示一下我拥有的表单和 ajax 代码。我还有一个 php 文件，在其中完成了实际处理。 php 文件现在除了'return true' 什么都不做。请看一下 ajax 代码，看看是否有任何明显的发现。非常感谢。

HTML：

<div class="container"> 
  <!-- Contacts -->
  <div id="contacts">
    <div class="row"> 
      <!-- Alignment -->
      <div class="col-sm-offset-3 col-sm-6"> 
          <p>&nbsp;</p>
          <p>Thank you for contacting <em>Make it to the Finish Line</em>. We will get back to you within 24 hours.</p>
          <p>&nbsp;</p>
          <!-- Form itself -->
          <form name="sentMessage" class="well" id="contactForm" novalidate ><!--action="contactcode.php" method="POST">-->
            <legend>Contact Form</legend>
            <div class="control-group">
              <div class="controls">
                <input type="text" class="form-control" placeholder="Name" id="name" /><!--required data-validation-required-message="Please enter your name" />-->
                <p class="help-block"></p>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <input type="email" class="form-control" placeholder="Email" id="email" required data-validation-required-message="Please enter your email" />
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <textarea rows="10" cols="100" class="form-control" placeholder="Message" id="message"></textarea><!--required 
                data-validation-required-message="Please enter your message" minlength="5" data-validation-minlength-message="Min 5 characters" 
                maxlength="999" style="resize:none"></textarea>-->
              </div>
            </div>
            <div id="success"> </div>
            <!-- For success/fail messages -->
            <button type="submit" class="btn btn-primary pull-right">Send</button>
            <br />
          </form>
      </div>
    </div>
  </div>
</div>

AJAX：

$(function() {
    $("input,textarea").jqBootstrapValidation(
    {
        preventSubmit: true,
        submitError: function($form, event, errors) {
        // something to have when submit produces an error ?
        // Not decided if I need it yet
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input#name").val();
        var email = $("input#email").val();
        var message = $("textarea#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({
            type: "POST",
            url: "./php/contactcode.php",
            data: {name: name, email: email, message: message},
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append( "</button>");
                $('#success > .alert-success')
                .append("<strong>Message sent successfully. Thank you again. </strong>");
                $('#success > .alert-success')
                .append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() { 
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append( "</button>");
                $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Please email me directly to <a href='mailto:ralf.riedel@usm.edu?Subject=error from MITTFL contact form'>ralf.riedel@usm.edu</a>. Sorry for the inconvenience.");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })
        },
        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 */
    $('#name').focus(function() {
        $('#success').html('');
});

Answer 1

改变

url: "./php/contactcode.php",

到

url: "/php/contactcode.php",

并将成功函数改成这个（只是为了更干净）

$('#success').html("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button><strong>Message sent successfully. Thank you again. </strong></div>");

因为 append 意味着在这个元素中插入一些东西（在最后）。您在其中附加了一个元素的结束标记，我认为这不是一个好习惯。