jquery ajax提交沒有刷新的序列化表單不起作用

Question

你好我有一個很大的問題，我的腳本使用ajax來發送一個表單並從後端php腳本得到響應。

我希望得到我的語氣的迴應，但在執行腳本的頁面轉到URL參數頁，打印出結果

這是錯誤 https://www.youtube.com/watch?v=BtiY9SMC1A0

function sub (a){ 

    $(a).submit(function(e) { 
    e.preventDefault(); 

     $.ajax({ 
     type: 'post', 
     url: 'creer.php', 
     data: $(a).serialize(), 
     success: function (response) { 
         $('#myModal').modal('show'); 
         $(".mydivinfo").html(response); 
     } 
     }); 

    // i have try withe post methode and that the same 
    /** $.post('creer.php', $(a).serialize(), function (data) { 
     $('#myModal').modal('show'); 
     $(".mydivinfo").html(data); 
    }).error(function() { 
     // This is executed when the call to mail.php failed. 
    });**/ 

    //alert(infos); 

    return false 
    }); 
    } 

的視頻

模態的html代碼

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Informations</h4> 
      </div> 
      <div class="modal-body"> 

      <div class="mydivinfo"> 
      </div> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> 
      </div> 

     </div> 
    </div>   
    </div> 

和我來電來訪子功能

<input name="addon" id="addon" type="SUBMIT" class="save btn btn-success btn-block" value="Enregistrer les modifications" onclick="sub(this);"> 

PHP反應必須是在不需要成功

..... 
    echo ' 
    <div class="box box-solid"> 
    <div class="box-header with-border info"> 
    <h3 class="box-title">Succèsses...</h3> 
    <div class="box-tools"> 
    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> 
    </div> 
    </div> 
    <div class="box-body no-padding"> 
    <ul class="nav nav-pills nav-stacked"> 
    <li class="active"><a><b>L\'utilisateur '.$user_name.' à été créer</b></a></li> 
    </ul> 
    </div><!-- /.box-body --> 
    </div> 

    <script> 
     $("#myModal").removeClass() 
     $("#myModal").addClass(\'modal modal-success fade\'); 
    </script> 
    '; 

Answer 1

功能分（A）後的模態，

$(document).ready(function(){ 
    $('form_selector').submit(function(e) { 
    e.preventDefault(); 

     $.ajax({ 
     type: 'post', 
     url: 'creer.php', 
     data: $('form_selector').serialize(), 
     success: function (response) { 
         $('#myModal').modal('show'); 
         $(".mydivinfo").html(response); 
     } 
     }); 

    // i have try withe post methode and that the same 
    /** $.post('creer.php', $(a).serialize(), function (data) { 
     $('#myModal').modal('show'); 
     $(".mydivinfo").html(data); 
    }).error(function() { 
     // This is executed when the call to mail.php failed. 
    });**/ 

    //alert(infos); 

    return false 
    }); 
}); 

Answer 2

爲什麼你需要一個提交按鈕呢？

只是把你提交到常規按鈕：

<button name="addon" id="addon" type="button" class="save btn btn-success btn-block">Enregistrer les modifications</button> 

和你的jQuery應該是：

$(document).ready(function(){ 
    $('#addon').click(function(){ 
     $.ajax({ 
     type: 'post', 
     url: 'creer.php', 
     data: $('form_selector').serialize(), // Change the 'form_selector' 
     success: function (response) { 
      $('#myModal').modal('show'); 
      $(".mydivinfo").html(response); 
     } 
     }); 
    }); 
}); 

Answer 3

我發現這個問題:) THX的所有:) 這個腳本解決我的問題它適用於所有瀏覽器：p

$(document).ready(function(){ 
    $('#addon').click(function(){ 

    var data = $('.createform').serialize(); 

    $.ajax({ 
    type: 'post', 
    url: 'creer.php', 
    data: data, 
    success: function (response) { 
     $('#myModal').modal('show'); 
     $(".mydivinfo").html(response); 
     alert(data); 

    } 
    }); 
    return false; 
}); 
});