以下代码前后端交互以Django模板语法为例

先来以伪代码来示意用法:

HTML部分:

javascript 追加html js 追加标签_字符串

 

JS动态插入部分代码:

javascript 追加html js 追加标签_ajax_02

 

运行之后我们来浏览器看检查打印的内容:

javascript 追加html js 追加标签_ajax_03

看插入前后打印结果我们可以得知

$title[0].innerHTML = $title.html() + '<p>嘿嘿</p>';

 这一句只是在原标签内部追加了一个

<p>嘿嘿</p>

 

原理解析:

$title.html()获取到了<tr>标签内部所有标签及文本,拿到的是字符串格式

然后让它+一个p标签,然后将相加后的整体重新加入到<tr>标签内部

innerhtml是原生JS的方法,它区别于innertext,innerhtml可以识别插入内容中的html标签

innertext会将插入内容当文本插入。

下面我们来看JS动态将子评论插入父评论下面显示的例子:

页面效果:

javascript 追加html js 追加标签_html_04

一个父评论为作为一楼展示,子评论都展示在父评论下面。

渲染思路:

1、父评论由页面加载时以模板渲染的方式加载和渲染

2、子评论在JS中定义一个function f(){},定义后直接f()调用,作用是向后端发送ajax请求,获取到所有子评论。

3、将子评论跟根据父评论id动态插入到父评论后面

 

首先看一篇文章父评论渲染HTML代码:

javascript 追加html js 追加标签_字符串_05

 

待渲染的子评论字符串代码:

javascript 追加html js 追加标签_html_06

 

 JS渲染的完整代码:

function f() {
            $.ajax({
                url: '/get_son_token/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'code': 'get_son_token',
                    'article_id': $("#id_article").val()
                },
                success: function (data) {   //data为后端返回的子评论数据,格式为:{'code':200,'msg':[子评论1,子评论2,子评论3...]}    
                    console.log(data.msg);  //子评论是一个个字典{'id':10,'create_time':'2019-06-22 22:12:12','parent_id':5,'user__usrname':'egon','user_id':'2','parent_user_username':'dxx'}
                                           
                    $.each(data.msg, function (index, obj) {
                        let id = obj.id;
                        let content = obj.content;
                        let create_time = obj.create_time;
                        let parentId = '#' + obj.parent_id;
                        let username = obj.user__username;
                        let user_id = obj.user_id;
                        let parent_username = obj.parent__user__username;
                        //一条待插入的回复记录
                        str = `<div><p>
                                        <a href='/${username}/'>${username}</a>
                                        回复: <a href="/${parent_username}/">${parent_username}</a>  <span>${create_time}</span>  
                                        <span>
                                            <a class='replay' username=${username} parent_id=${id}>回复</a>  
                                            <a class='cite' content=${content}>引用</a>
                                        </span>
                                       </p>
                                    <p>内容: <span>${content}</span></p>
                                    <div id="${id}"></div>
                               </div>`;

                        //$(parentId).html()取到所有上一级评论内部html及文本
                        //与新插入的记录相加后再覆盖原标签内部所有html及文本
                        $(parentId)[0].innerHTML = $(parentId).html() + str;
                    })
                }
            })
        }
f();  //页面加载即调用

 

 Django后端为ajax提供数据的代码:

import datetime
def get_son_token(request):
    if request.POST.get('code') == 'get_son_token':
        #取出所有该文章下的子评论
        token_list = models.Token.objects.exclude(parent_id=None).filter(article_id=request.POST.get("article_id")).values('id',
                  'user__username','parent_id','create_time','content','user_id','parent__user__username')
        token_list = [dict(obj) for obj in token_list]

        for obj in token_list:
            obj['create_time'] = obj['create_time'].strftime("%Y-%m-%d %X")
            #obj: {'id': 23, 'user__username': 'kevin', 'parent_id': 13, 'create_time': '2019-06-24 22:49:32', 'content': '你又在拍马屁dxx', 'user_id': 39, 'parent__user__username': 'dxx'}
        back_dic = {'code': 200, "msg": token_list}
        return JsonResponse(back_dic)

 

数据库存储结构:

parent_id为自关联字段,article_id为文章外键关联,user_id为当前评论人(外键)

javascript 追加html js 追加标签_字符串_07

程序猿,要对自己狠一点!