Jquery表单、Bootstrap、浏览器和操作系统提交的奇怪问题

Question

我正在处理一个页面提交表单，我遇到的问题是在MAC OS 10.5 - 10.8浏览器上- FF，Chrome和Safari都可以正常工作，但在使用IE 8 +11浏览器的Windows 7和Chrome上，提交不会通过，即使在说成功之后也是如此。在Windows7上的FireFox v28上，只有在某些计算机上才能正确提交和更新表单。该网站位于Bootstrap上。下面是HTML：

<div class="modal fade bs-preview-modal-lg" id="preview-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
  <div class="modal-body">
    <div class="section-header">
      <h4 id="title-out"></h4>
    </div>
    <div class="content">
      <div class="row">
        <div class="media media-out"></div>
        <div class="info info-out"></div>
        <div class="body body-out"></div>
        <div class="faq faq-out"></div>
        <div class="external-links external-links-out"></div>
      </div>
    </div>
    </div>
    </div>
 </div>
</div>
<div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <p>Updating&hellip;</p>
  </div>
 </div>
</div>
 </div>

​

页脚中的jquery ajax加载是

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/assets/v1/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/v1/js/jquery.form.js"></script>
    <script src="/assets/v1/lib/chosen/chosen.jquery.js"></script>

    <script type="text/javascript">

$(document).ready(function() {


    $(document).on({
      ajaxStart: function() {$('#ajax-modal').modal('show');},
      ajaxStop: function() {$('#ajax-modal').modal('hide');}
    });

    $('#publishForm').ajaxForm({
      dataType: 'json',
      success: function(data) {
        if (data.success) {$('#success-modal').modal();} else {
          $('#failure-modal').modal();
          console.log(data);
        }
      }
    });

是不是有什么东西堵塞了Windows，但不受MAC OS的影响？

Answer 1

我认为它在jquery.form.js-plugin中。如果只使用jQuery内置ajax函数会怎么样？

$(document).ready(function() {
    $('#publishForm').submit(function() {
      // prevents the form from submitting normally
        event.preventDefault();
        var url = $(this).attr("action");
        // Showing the #ajax-modal right away rather than wait until the ajax starts.
        $('#ajax-modal').modal('show');
        $.ajax(url, {
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#success-modal').modal();
                } else {
                    $('#failure-modal').modal();
                    console.log(data);
                }
            },
            complete: function() {
              // When the ajax-request is complete, it will hide the #ajax-modal (no matter if the request failed or not).
                $('#ajax-modal').modal('hide');
            }
        });
    });
});