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

您好，我的脚本使用ajax发送表单并从后端php脚本获得响应时遇到了一个大问题

我想在我的模态上得到一个响应，但是当脚本被执行时，页面会转到url参数页面并打印结果

这是错误的视频

模态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>
    ';

。。。。。
回声'
成功。。。

L'usilisateur'.$user\u name.'aétécréer

$（“#myModal”）.removeClass（）
$（“#myModal”）.addClass（\'modal-model-success-fade\'）；
';

不需要功能子模块（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 
    });  
});

---

为什么你需要一个提交按钮呢

只需将提交变成常规按钮：

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

我发现了问题：）thx for all:） 这个脚本解决了我的问题，它适用于所有浏览器：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;
 });  
});

---

在哪里调用

sub

函数。更新代码以包含相关部分。我尝试了@mojtaba zangeneh的代码，但同样认为，数据已提交，但页面加载aja usrl参数中的url并打印响应。您可以在浏览器检查器中看到控制台并查看是否有错误？无错误数据正常提交并插入数据库，但是该页面正在刷新并打印成功结果，通常情况下，该页面不会刷新并在您提交的modaldelete onclick=“sub（this）；”中显示和打印结果，因为表单标签本身称为submin，请让我们查看您的表单html

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

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