jquery ajax提交序列化表单而不刷新不起作用

Question

Hello I have a big problem with my script using ajax to send a form and getting a response from backend php script.

I would like to get a response on my modal but when the script is executed the page goes to the url parameter page and prints the results

this is the video of the error 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 
    });  
  }

the modal html code

    <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> 

and i call the sub function here

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

php response must be on the modal after success

  ..... 
  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

function sub(a) is not needed,

$(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 
    });  
});