Question

我创建了一个系统，允许用户查看照片并对其进行评论。如果用户点击相册，则会将其发送到页面，其中第一张照片（评论的评论和回复）显示在页面的中央。在右侧，将列出当前专辑的所有其他照片。

这部分是用简单的PHP代码完成的，并且每次加载新页面都会附带。

当用户点击其中一张照片（右侧列出）而不是整个页面时，只会通过Ajax加载相应的元素（照片，评论，评论的回复）。

到目前为止效果很好。以下是相应的代码以便更好地理解：

PHP：

// Get data from the database to display the current photo and its comments on the page
// Some Code

// Here is the included file to get the HTML for the comments --> Problem number 2

// List all the photos of the current album at the right side
$album_id = preg_replace('#[^0-9]#', '', $_GET['id']);

$sql = "SELECT * FROM albums WHERE id='$album_id' LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);

while ($row = mysqli_fetch_array($user_query, MYSQLI_ASSOC)) {
    $u = $row['user'];
}

$sql = "SELECT DISTINCT * FROM photos WHERE album_id='$album_id'"; 
$query = mysqli_query($db_conx, $sql);

while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {

    $id = $row['id'];
    $filename = $row['filename'];

    $style_list_right .= '<div id="right_'.$id.'" onclick="getPhotos(\''.$album_id.'\',\''.$id.'\',\''.$u.'\')">';
    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" />';
    $style_list_right .= '</div>';
}

如果用户点击照片，则会调用函数getPhotos（）

function getPhotos(album,photo,user){
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var photo = ajax.responseText.split("|");

            // Change the HTML to display the photos

            // Call the Function to get the comments
            getComments(photo);
        }
    }
    ajax.send("show=photos&photo="+photo);
}

function getComments(photo) {
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var comments = ajax.responseText.split("|||");
            for (var i = 0; i < comments.length; i++){ 
                var comment = comments[i].split("|");
                if(comment[1] == "<?php echo $log_username; ?>") {      // If the user is the author of the comment
                    // Change the HTML of the comments
                    _('comment_'+photo).innerHTML += '<?php echo $comments_html; ?>';    // This is for problem number 2

                    // Call the Function to get the replies of the comment
                    getReplies(comment[0]);    // Send the ID of the comment
                }
            }
        }
    ajax.send("show=comments&photo="+photo);
}

function getReplies(commentID) {
    var ajax = ajaxObj("POST", "path/some_php_file.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            // Get a string from PHP delimited by |
            var replies = ajax.responseText.split("|||");
            for (var i = 0; i < replies.length; i++){ 
                var reply = replies[i].split("|");
                if(reply[1] == "<?php echo $log_username; ?>") {        // If the user is the author of the reply
                    // Change the HTML of the replies
                    _('reply_'+ commentID).innerHTML += '<?php echo $replies_html; ?>';    // This is for problem number 2
                }
            }
        }
        ajax.send("show=replies&commentID="+commentID);
    }
}

some_php_file.php：

// Ajax calls this to load the clicked Photo --> getPhotos()
if (isset($_POST["show"]) && $_POST["show"] == "photos"){
    $picstring = "";
    $photo_id = preg_replace('#[^0-9]#', '', $_POST["photo"]);
    $sql = "...";
    $query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $filename_1 = $row["..."];
        $filename_2 = $row["..."];
        $photoname = $row["..."];
        $picstring .= "$filename_1|$filename_2|$photoname|||";
    }
    mysqli_close($db_conx);
    $picstring = trim($picstring, "|||");
    echo $picstring;
    exit();
}

// Ajax calls this to load the comments of the clicked photo --> getComments()
if (isset($_POST["show"]) && $_POST["show"] == "comments") {
    $commentstring = "";
    $photo_id = preg_replace('#[^0-9]#', '', $_POST["photo"]);
    $sql = "...";
    $query = mysqli_query($db_conx, $sql);
    while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        $commentid = $row["..."];
        $author = $row["..."];
        $postdate = $row["..."];
        $avatar = $row["..."];
        $user_image = '<img src="'.USERFILES.$author.'/'.$avatar.'" />';
        $data = $row["..."];
        $data = nl2br($data);
        $data = str_replace("&amp;","&",$data);
        $data = stripslashes($data);
        $statusDeleteButton = '';
        if($author == $log_username) {      //  || $account_name == $log_username
            $statusDeleteButton = '...';
        }
        $commentstring .= "$commentid |$author|$data|$postdate|$user_image|$statusDeleteButton|||";
    }
    mysqli_close($db_conx);
    $commentstring = trim($commentstring, "|||");
    echo $commentstring;
    exit();
}

// Ajax calls this to load the replies of the comments --> getReplies()
if (isset($_POST["show"]) && $_POST["show"] == "replies") {
    $commentstring = "";
    $comment_id = preg_replace('#[^0-9]#', '', $_POST["comment"]);
    // GATHER UP ANY STATUS REPLIES
    $status_replies = "";
    $sql = "...";
    $query_replies = mysqli_query($db_conx, "...");
    $query_replies = mysqli_query($db_conx, $sql);
    $replynumrows = mysqli_num_rows($query_replies);
    if($replynumrows > 0) {
        while ($row = mysqli_fetch_array($query_replies, MYSQLI_ASSOC)) {
            $replyid = $row["…"];
            $replyauthor = $row["..."];
            $replydata = $row["..."];
            $avatar = $row["…"];
            $user_image = '<img src="'.USERFILES.$replyauthor.'/'.$avatar.'"/>';
            $replydata = nl2br($replydata);
            $replypostdate = $row["..."];
            $replydata = str_replace("&amp;","&",$replydata);
            $replydata = stripslashes($replydata);
            $replyDeleteButton = '';
            if($replyauthor == $log_username) { 
                $replyDeleteButton = '…';
            }
            $commentstring .= "$replyid|$replyauthor|$replydata|$replypostdate|$user_image|$replyDeleteButton|||";
        }
    }
    mysqli_close($db_conx);
    $commentstring = trim($commentstring, "|||");
    echo $commentstring;
    exit();
}

问题1：

在我看来，这种变体不是很快。特别是嵌套的Javascript和常量数据库查询非常尴尬，对我来说不是很及时。

所以问题是，是否有任何建议来优化代码结构或代码本身。也许还有更模块化的方法来实现它。

问题2：

下一个问题是注释的HTML-Construct在Javascript和PHP中几乎相同（变量除外）。因此，创建一个包含注释HTML的文件对我来说是合乎逻辑的。现在，PHP和Javascript可以使用相同的文件来构建注释及其回复。

include.php：

$variable = "";

if (IS_AJAX) {
    $user = \'+variable[0]+\';
    $content = \'+variable[1]+\';
}

$variable .= '<div>';
$variable .=     '<a href="'.$user.'">'.$user.'</a>';
$variable .=        '<div><p>'.$content.'</p></div>';
$variable .= '</div>';

问题是如果ajax函数使用此文件，则必须为Javascript更改PHP变量。因此我尝试了以下内容。

some_php_file.php：

$ajax = 0;
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    $ajax = 1;
}
define('IS_AJAX',$ajax);

但这不起作用。因为我已经读过这可能是由于服务器和我使用MAMP的信息。你有什么解决方案吗？

Answer 1

我认为你应该在从服务器（http://php.net/manual/en/function.json-encode.php）获取数据时使用json结构，这应该避免你以后需要在你的js中做的任何“拆分”的东西，还有其他额外的优点。也请查看http://api.jquery.com/jQuery.getJSON/。当您加载页面中的所有图像时：

   $style_list_right .= '<div id="right_'.$id.'"    onclick="getPhotos(\''.$album_id.'\',\''.$id.'\',\''.$u.'\')">';
    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" />';
    $style_list_right .= '</div>';

您可以这样做：

    $style_list_right .=     '<img src="'.USERFILES . $u.'/'.$filename.'" filename=$filename photoname="$photoname" albimid="$album_id" onclick="getPhotos(this)"/>';

因此，您在第一次获取时获得了所有信息，因此当您单击它时，您可以从图像属性中获取这些详细信息（而不是进行ajax调用）。因此，您只需要一个ajax调用即可获得评论。因为你从服务器获得的数据量较少，这使你的ajax响应速度更快，然后你可以在客户端使用js在你的周围添加这些标记，这对你的ajax响应只返回数据（没有html标记）也有好处。数据快得多。希望这有点帮助。

嵌套的javascript使评论系统变慢

1 个答案: