Question

我遇到的问题是我有两个单独的AJAX请求使用jQuery，一个在页面加载时执行，另一个在点击按钮时执行，但它们几乎相同（在代码中），因为它们都更新相同的html并且都返回JSON，我只是想知道是否会有一种方法来“合并”这两者，所以更像是：

[pseudo]
if(button is clicked){
     performAjaxOne;
}else{
     performAjaxTwo
}
[/pseudo]

这是我的实际代码：

    $(document).ready(function(){

            $('.loading-text').hide();

            $.ajax({
                url: '/ajax/job/getActiveJobs.php',
                dataType: 'json',
                type: 'post',
                success: function( data ){

                    $('#loading, .loading-text').show();

                    if( !data.error ){
                        $('.alertText').html( data.msg ).show();
                    }else{
                        $('.alertText').html( data.error ).show();
                    }

                    $('#loading, .loading-text').hide();
                }
            });


            $('#submit').click(function( event ){

                var formData = $('#contact_search').serialize();

                $('#loading, .loading-text').show();

                $.ajax({
                    url: '/ajax/job/searchJobs.php',
                    dataType: 'json',
                    type: 'post',
                    data: formData,
                    success: function ( e ){

                        alert( e );

                        if( !e.error ){
                            $('.alertText').html( e.content ).show();
                        } else {
                            $('.alertText').html( e.error ).show();
                        }

                        $('#loading, .loading-text').hide();
                    }
                });
            });
        });

请告诉我。

提前致谢！

Answer 1

删除初始ajax请求和更改#submit代码：

   $('#submit').click(function( event ){

       // your ajax request

    }).click(); // this `click()` will initially fire when page loaded

Answer 2

由于JavaScript没有严格类型化，您可以编写一个处理函数，在运行时测试参数的类型：

var ajaxSuccessCallback = function(param) {
    if (typeof param.msg !== undefined) {
        // Do stuff on page load
    } else {
        // Do stuff specific to button clicked
    }
    // Do common stuff
}

并像这样使用它：

$.ajax({
    // ...
    success: ajaxSuccessCallback
});

Answer 3

$(document).ready(function(){
    $('.loading-text').hide();
    var url = '/ajax/job/getActiveJobs.php';
    makeAjaxRequest(url);
    $('#submit').click(function( event ){
        var formData = $('#contact_search').serialize();
        $('#loading, .loading-text').show();
        url = '/ajax/job/searchJobs.php';
        makeAjaxRequest(url);
    })
})

    function makeAjaxRequest(url){
        $.ajax({
                    url: url,
                    dataType: 'json',
                    type: 'post',
                    success: function( data ){

                        $('#loading, .loading-text').show();

                        if( !data.error ){
                            $('.alertText').html( data.msg ).show();
                        }else{
                            $('.alertText').html( data.error ).show();
                        }

                        $('#loading, .loading-text').hide();
                    }
                });

    }

jQuery 2 ajax请求一个onClick

3 个答案: