基于 flask 框架的模拟instagram 图片分享网站的开发 6

本文链接：https://blog.csdn.net/zhyh1435589631/article/details/51889510

昨天发布的版本中中文字符会出现乱码，本地调试半天发现没有问题，估计是数据库存在问题。
这次呢，添加了邮件激活功能，优化flash 显示特性，以及保证首页初次加载的图片可以实现评论的异步加载。
邮件激活， flash 显示都是非常基本的功能，不再多说了。

这里讲一下首页图片的评论异步加载的实现思路：
由于我们首页的图片和评论都是通过 for 循环实现出来的，他们有着相同的id，在使用jquery 进行捕获的时候，我们通常只能捕获到第一个控件元素，于是我们想到了，可以通过循环的变量 loop.index 为每个控件添加一个随着循环变化的控件id，然后我们去捕获这个id即可

参考资料：
1. JQuery选择id时只能选到第一个元素
2. jQuery对新添加的控件添加响应事件
3. jquery 中如果用户点击了一个控件，我怎么知道控件的名称。或者ID
4. jquery 如何截取字符串

项目工程地址：
https://code.csdn.net/zhyh1435589631/instagram_simulation/tree/master

下面给出相应的js 代码：

$(function () {
    var oExports = {
        initialize: fInitialize,
        encode: fEncode
    };
    oExports.initialize();

    function fInitialize() {
        var that = this;

        var num = $('ul.discuss-list');
        for (i = 1; i <= num.length; i++){
            //var sImageId = $('#js-image-id-' + i);
            //console.log(sImageId.val())
            //var oCmtIpt = $('#jsCmt-' + i);
            //var oListDv = $('#js-discuss-list-' + i);

            // 点击添加评论
            var bSubmit = false;
            $('#jsSubmit-' + i).on('click', function () {
                var control_id = $(this).attr('id')
                var id = control_id.substring(9)
                console.log(id)
                var sImageId = $('#js-image-id-' + id).val();
                console.log(sImageId)
                var oCmtIpt = $('#jsCmt-' + id);
                console.log(oCmtIpt.val())
                var oListDv = $('#js-discuss-list-' + id);

                //var sCmt = $.trim(oCmtIpt.val());
                //alert(sCmt)
                sCmt = oCmtIpt.val()
                console.log(sCmt)
                // 评论为空不能提交
                if (!sCmt) {
                    console.log('pinglun: ' + id + oCmtIpt.attr('id'))
                    return alert('评论不能为空');
                    //continue;
                }
                // 上一个提交没结束之前，不再提交新的评论
                if (bSubmit) {
                    return;
                }
                bSubmit = true;
                $.ajax({
                    url: '/addcomment/',
                    type: 'post',
                    dataType: 'json',
                    data: {image_id: sImageId, content: sCmt}
                }).done(function (oResult) {
                    if (oResult.code !== 0) {
                        return alert(oResult.msg || '提交失败，请重试');
                    }
                    // 清空输入框
                    oCmtIpt.val('');
                    // 渲染新的评论
                    var sHtml = [
                        '<li>',
                            '<a class="_4zhc5 _iqaka" title="', that.encode(oResult.username), '" href="/profile/', oResult.user_id, '">', that.encode(oResult.username), '</a> ',
                            '<span><span>', that.encode(sCmt), '</span></span>',
                        '</li>'].join('');
                    oListDv.prepend(sHtml);
                }).fail(function (oResult) {
                    alert(oResult.msg || '提交失败，请重试');
                }).always(function () {
                    bSubmit = false;
                });
            });
        }
    }

    function fEncode(sStr, bDecode) {
        var aReplace =["&#39;", "'", "&quot;", '"', "&nbsp;", " ", "&gt;", ">", "&lt;", "<", "&amp;", "&", "&yen;", "¥"];
        !bDecode && aReplace.reverse();
        for (var i = 0, l = aReplace.length; i < l; i += 2) {
             sStr = sStr.replace(new RegExp(aReplace[i],'g'), aReplace[i+1]);
        }
        return sStr;
    };

});