Question

我有这段代码最终适合我

  $(function(){
      $('.submit1').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform1").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  }); 

    $(function(){
      $('.submit2').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform2").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  }); 
      $(function(){
      $('.submit3').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform3").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  });

是否可以将所有3组合并为1段代码？

Answer 1

我假设按钮没有任何其他类，如果是这样，您可以使用this.className.slice(-1)获取最后一位数字并使用一个事件处理程序定位所有按钮并使用最后一位数来获得正确的形式：

$(function(){
    $('[class^="submit"]').on('click', function() {
        var n = this.className.slice(-1);
        $.ajax({
            type : 'POST',
            url  : 'delanno.php',
            data : $('#myform' + n).serialize(),
            beforeSend: function(){
                $('#result').html('<img src="images/loading.gif" />');
            }
        }).done(function(data) {
            $('#result').html(data);
        });

        $('.deleter').on('click', function(){
            $(this).closest('.announce-box').remove();
        }); 
    });
});

根据评论中的建议，如果提交按钮位于相关表单内，则应使用实际的提交按钮并捕获提交事件，而不是按钮上的点击事件：

$(function(){
    $('[id^="myform"]').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type : 'POST',
            url  : 'delanno.php',
            data : $(this).serialize(),
            beforeSend: function(){
                $('#result').html('<img src="images/loading.gif" />');
            }
        }).done(function(data) {
            $('#result').html(data);
        });

        $('.deleter').on('click', function(){
            $(this).closest('.announce-box').remove();
        }); 
    });
});

Answer 2

是的，它应该是......

post = function (ele) {
     $.ajax({
         type: "POST",
         url: "delanno.php",
         data: $(ele).serialize(),
         beforeSend: function () {
             $('#result').html('<img src="images/loading.gif" />');
         },
         success: function (data) {
             $('#result').html(data);
         }
     });
 };

 $(function () {
     $('.submit1').on('click', post($('#submit1')));
     $('.submit2').on('click', post($('#submit2')));
     $('.submit3').on('click', post($('#submit3')));
     $('.deleter').on('click', function () {
         $(this).closest('.announce-box').remove();
     });
 });

如果可能的话，ajax会在提交时清理

2 个答案: