Ajax“ URL”问题（我认为）

Question

Got a question re submitting forms using ajax. I am trying to submit a 'contact' form using jquery/ajax. I got some code online and would like to tailor it to my needs. It seems that the 'url' parameter for the ajax function is not working properly. When I enter the full url for the php code, ajax throws and error, but when I enter a fake url, the ajax code executes (without, obviously, sending any information). So, let me show the form I have and the ajax code. I also have a php file, where the actual processing is done. The php file right now does nothing other than 'return true'. Please, take a look at the ajax code and see if you find anything obvious. Thx a lot.

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:[e-mail]?Subject=error from MITTFL contact form'>[e-mail]</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

Change

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

to

url: "/php/contactcode.php",

And change the success function to this (just to make it more clean)

$('#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>");

Because append means to insert something inside this element (at the end). You appended the closing tag of an element inside it, I don't think this is a good practice.