Question

我有一个ajax请求，可以将人员数据打印到页面上。人员数据从后端数据库整理。页面上有一个搜索表单，包括位置，部门，服务和职位。

这是我的javascript：

//var keyPeople = '';
<?php if(isset($_REQUEST['keyPeople'])) { ?>
    var keyPeople = <?php echo $_REQUEST['keyPeople']; ?>;
<?php } else { ?>
    var keyPeople = '';
<?php } ?>

<?php if(isset($_REQUEST['keySector'])) { ?>
    var keySector = '<?php echo urldecode($_REQUEST['keySector']); ?>';
<?php } else { ?>
    var keySector = '';
<?php } ?>

<?php if(isset($_REQUEST['keyService'])) { ?>
    var keyService = '<?php echo urldecode($_REQUEST['keyService']); ?>';
<?php } else { ?>
    var keyService = '';
<?php } ?>

var loaderHTML = '<div class="ajax-loader" style="padding: 20px; text-align: center"><img src="' + CCM_IMAGE_PATH + '/throbber_white_32.gif"></div>';

$('.load-more').on('click', function(e) {
    if ($(this).data('nextpage') != 'eor' || $(this).data('nextpage') != 'nr') {
        getPeople($(this).data('nextpage'));
    }
});

function getPeople(pageNumber) {
        $('.load-more').before(loaderHTML);
        $.ajax({
            url: '<?php echo $loadUrl; ?>',
            cache: false,
            data: {'parent_id': '<?php echo $parentID; ?>', 'page': pageNumber, 'name': $('#people-name').val(), 'location': $('#office-location .selecter-selected').text(), 'sectors': $('#sectors .selecter-selected').text(), 'service': $('#services .selecter-selected').text(), 'jobtitle': $('#jobtitle .selecter-selected').text(), 'keyPeople': keyPeople, 'keySector': keySector, 'keyService': keyService},
            dataType: 'json',
            success: function(data) {
                $('.ajax-loader').fadeOut(function() {
                    //console.log(data);
                    var pageData = '';
                    var searchParams = new Array();

                    if(data.locationParam != null) {
                        searchParams.push(data.locationParam);
                    }
                    if(data.sectorParam != null) {
                        searchParams.push(data.sectorParam);
                    }
                    if(data.serviceParam != null) {
                        searchParams.push(data.serviceParam);
                    }

                    if (typeof searchParams !== 'undefined' && searchParams.length > 0) {
                        pageData += '<h2>Our People: ';
                        pageData += searchParams.join(', ');
                        pageData += '</h2>';
                    }

                    if(data.noResults == 'nor') {
                        pageData += '<h3 class="no-results">Sorry, no results found</h3>';
                    } else {
                        $.each(data.pages, function(k, v) {

                            pageData += '<div class="grid person-list-item">';
                            pageData += '<div class="col col-3 person-thumbnail">';
                            if(v.image != null) {
                                pageData += '<a href="'+v.url+'"><img src="'+v.image+'" alt="'+v.title+'"></a>';
                            }
                            pageData += '</div>';

                            pageData += '<div class="col col-9 person-info">';
                            pageData += '<h3><a href="'+v.url+'">'+v.title+'</a></h3>';
                            if(v.jobtitle != null) {
                                pageData += '<p class="lead-partner"><strong>'+v.jobtitle.value+'</strong></p>';
                            }
                            pageData += '<p>';
                            if(v.location != null) {
                            pageData += '<strong>Location:</strong> '+v.location.value+'<br>';
                            }
                            if(v.tel != false) {
                                pageData += '<strong>Tel:</strong> '+v.tel+'<br>';
                            }
                            if(v.mobile != false) {
                                pageData += '<strong>Mobile:</strong> '+v.mobile+'<br>';
                            }
                            if(v.email != false) {
                                pageData += '<strong>Email: <a href="mailto:'+v.email+'">'+v.email+'</a></strong>';
                            }
                            pageData += '</p>';
                            pageData += '<a href="'+v.url+'" class="button button-green">Read More</a>';
                            if(v.linkedIn != false) {
                                pageData += '<a href="'+v.linkedIn+'" class="button button-blue">LinkedIn Profile</a>';
                            }
                            pageData += '</div></div>';

                        });

                    }

                    if (pageNumber == 1) {
                        $('#page-list').empty();
                    }

                    $('#page-list').append(pageData);

                    if (data.nextPage == 'eor') {
                        $('.load-more').hide();
                    } else {
                        $('.load-more').html('Load more people').data('nextpage', data.nextPage).fadeIn();
                    }

                    if(data.noResults == 'nor') {
                        $('.load-more').hide();
                    }

                    $('.ajax-loader').remove();
                });
            }
        });

}
getPeople(1);

$("#people-search-form").submit(function(e){
    e.preventDefault();
    $('#page-list').empty();
    getPeople(1);
});

好的抱歉，如果它有点压倒性，这就是它的作用。在页面加载时，它显示数据库表中的所有前10个人。点击（加载更多）它再显示10，从而再次触发ajax调用。每个人都是从json数组中获取的。

也可以搜索多个某些参数，例如触发搜索后，它会将搜索参数显示为标题：

pageData += '<h2>Our People: ';
pageData += searchParams.join(', ');
pageData += '</h2>';

可以理解，每次点击（加载更多）按钮后，这都会附加到页面上。我只想在页面顶部附加一次和/或在搜索参数更改时更改？关于我需要做些什么才能实现这个目标？我知道我需要一个新函数，因为在每次加载点击后，函数getPeople会被调用。

对不起，如果这没有任何意义!!

Answer 1

查看您的代码，您正在调用

$('#page-list').append(pageData);

使用

$('#page-list').html(pageData);

用这个html替换当前的html

如果你想追加，那么在pageData html之外定义带有id的h2标签（因此每次都不会附加）。 e.g：

<h2 id='ourPeople'></h2>

然后代替

pageData += '<h2>Our People: ';
pageData += searchParams.join(', ');
pageData += '</h2>';

在$（'。ajax-loader'）的顶部定义一个新的var.fadeOut（function（）{ 像：

var ourPeopleText = '';

更改此声明的内容：if（typeof searchParams！=='undefined'＆amp;＆amp; searchParams.length＆gt; 0）{to

ourPeopleText += 'Our People: ';
ourPeopleText += searchParams.join(', ');

然后在你打电话的底部

$('#page-list').append(pageData);

也打电话

$('#ourPeople').html(ourPeopleText);

管理get people ajax请求

1 个答案: