如何使用 Jquery 在 Ajax 中添加两个具有独立功能的按钮

Question

我有两个按钮“插入”和“选择”，它们用于使用 AJAX 插入和显示记录，我希望它们都应该具有独立的功能，例如，每当我单击选择按钮时，应该显示记录当我单击插入时，应该插入记录。现在在下面的代码中，选择的第二个按钮取决于单击插入按钮。然后我想独立工作。

<script>
    $(document).ready(function(){ 
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
            url:"back1.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg)
            {
                $('#select').click(function(event){
                event.preventDefault(); 
                $.ajax({
                url:"back1.php",
                dataType:"html",
                success:function(strMsg)
                {
                    $('#Smsg').html(strMsg);    
                }                   
                    });


                });

                $('#Imsg').html(strMsg);

            }


        });  
    });
});
</script>

Answer 1

正如上面评论中所写，功能是依赖的，因为您在插入按钮的成功方法中为选择按钮定义了事件处理程序。

顺便说一句，这在逻辑上可能是正确的：如果您在触发选择请求之前需要插入请求的响应。在那种情况下，应该有这样的依赖。无论如何，如果不是这种情况，只需将事件处理程序移至外部：

// when everything is ready...
$(document).ready(function(){ 

    // first event handler
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
                url:"back1.php",
                method:"post",
                data:$('form').serialize(),
                dataType:"html",
                success:function(strMsg) {
                    $('#Imsg').html(strMsg);
                }
        });  
    });

    // second (independent) one
    $('#select').click(function(event){
        event.preventDefault(); 
        $.ajax({
            url:"back1.php",
            dataType:"html",
            success:function(strMsg) {
                $('#Smsg').html(strMsg);    
            }
        });
    });
});

还有一些事情——我建议使用on，而不是click：

$('#select').on('click', function(event){...});

并尽量避免代码重复，在您的情况下，您可以执行以下操作：

function AjaxEventHandler(data, targetObject) {
    $.ajax({
        url:"back1.php",
        method:"post",
        data: data,
        dataType:"html",
        success:function(strMsg) {
            targetObject.html(strMsg);
        }
    });
}

$(document).ready(function(){ 
    $('#insert').on('click', function(event) {
        event.preventDefault();
        AjaxEventHandler($('form').serialize(), $('#Imsg'))
    });

    $('#select').on('click', function(event) {
        event.preventDefault();
        AjaxEventHandler({}, $('#Smsg'))
    });
});