Question

有一个问题是使用ajax重新提交表单。我正在尝试提交一个“联系人”＃39;使用jquery / ajax形成。我在线获得了一些代码，并希望根据我的需求进行定制。看来，这个＆＃39; url＆＃39; ajax函数的参数无法正常工作。当我输入php代码的完整url时，ajax会抛出错误，但是当我输入一个假网址时，执行ajax代码（显然没有发送任何信息）。那么，让我展示一下我的表格和ajax代码。我还有一个php文件，实际处理完成。 php文件现在只做＆＃39;返回true＆＃39;。请查看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意味着在这个元素中插入一些东西（在结尾处）。你在其中附加了一个元素的结束标记，我不认为这是一个好习惯。

ajax＆＃39; url＆＃39;问题（我认为）

1 个答案: