php - Jquery $.post 到 PHP 脚本时间滞后

Question

我有一个带有无序列表的 PHP 页面。我有一些 jQuery 代码等待用户单击列表中的一项:

$(function() {
$('li.large_box').css('cursor', 'pointer')
.click(function() {
    $('#db_sections').empty();
    var show_id = this.id;
    $.post('get_section_dates.php', { show_id: show_id }, function(sections) {  
    $('#section_dates_feedback').html(sections);
    });
});
});

当用户单击其中一项时，jQuery 代码会将其 id 发送到 php 脚本，该脚本进行数据库查询并使用结果构建下拉列表:

if (isset($_POST['show_id'])) {
    $show_id = $_POST['show_id'];
    $result = mysql_query("SELECT `id`,`air_date` FROM `daily_show` WHERE show_id = '".$show_id."'");

       echo"<div id='dates_select'>";
       echo "<select id='date_select'>";
       echo "<option value='0'>Choose a date</option>";        
    while ($query = mysql_fetch_assoc($result))
    {
        $id = $query['id'];
        $air_date = strtotime($query['air_date']);
        $date = date("M-d-Y \(D\)",$air_date);
       echo "<option value='$id'>$date</option>";     
    }
echo "</select>";
echo "</div>";
}

我第一次单击其中一个列表项时，一切都运行得很快，并且下拉框正确显示。问题是，当我单击下一个列表项时，代码需要多花几秒钟的时间来构建新的下拉列表来代替旧的下拉列表。每次新单击不同的列表项都会增加构建下拉列表所需的时间，直到每次花费超过一分钟。

它查询的数据库表只有12条记录长，一般最多只返回1或2行。

我是 PHP/jQuery 新手，想知道我的代码中是否有任何明显明显的因素减慢了这个过程。

感谢您查看我的问题!

Answer 1

您应该考虑优化您的传输方法以及处理它的 JS。

首先，您的脚本每次点击都会构建“胖”。即存在过多的 jQuery 调用。您可以将其优化为:

$(function() {

    //put into reference static elements
    $db_sections = $('#db_sections');
    $section_dates_feedback = $('#section_dates_feedback');

    //delegate event to parent handler using .on()
    $('the_containing_ul').on('click', 'li.large_box', function() {
        $db_sections.empty();
        $.post('get_section_dates.php', {
            show_id: this.id
        }, function(data) {
            //callback
        });
    });
});

<小时/>

至于你的 PHP 回复，你至少应该使用 JSON 进行传输，而不是 HTML，以使其轻便。您可以使用json_encode将 PHP 数组转换为 JSON 字符串以进行传输。

if (isset($_POST['show_id'])) {

    $show_id = $_POST['show_id'];
    $result = mysql_query(query_here);
    $resultArray = mysql_fetch_assoc($result)

    //do a little formatting before we send over
    while ($resultArray){
        $resultArray['air_date'] = date("M-d-Y \(D\)",strtotime($resultArray['air_date']));   
    }

    echo json_encode($resultArray);
}

这将打印以下 JSON 字符串，这比打印 HTML 更好:

[
    {"id":"1","air_date":"January 1, 12"},
    {"id":"2","air_date":"January 2, 12"},
    {"id":"3","air_date":"January 3, 12"},
    ... and so on
]

<小时/>

现在，在 POST 请求中，jQuery 直观地将其转换为我们可以解析的 JSON 对象。您现在可以使用它来生成选择框。这将是回调:

function(data) {

    //create a select and div, and append it to a div
    $div = $('<div id="dates_select" />');
    $select = $('<select id="date_select" />').appendTo($div);

    //create options based on data and append to select
    $.each(data,function(index,row){
        $('<option />')
            .attr('value',row.id)
            .text(row.air_date)
            .appendTo($select);
    }

    //put div into the feedback
    $section_dates_feedback.html($div);

}