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

不需要函数sub（a），

If x & "" <> "" then

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

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

3 个答案: