ajax获取后台数据并插入到tr中的功能实现

最新推荐文章于 2021-08-05 23:16:59 发布

原创最新推荐文章于 2021-08-05 23:16:59 发布

· 1.9k 阅读

0 ·

版权

文章标签：

#ajax #javascript #django

web 专栏收录该内容

32 篇文章

订阅专栏

本文记录了一个项目需求，即通过Ajax获取后台数据，并根据点击事件在特定TR下动态插入新的TR，实现数据展开和折叠功能。遇到的主要问题包括JS不熟悉和URL配置错误，最终通过优化JS代码和Django后台处理实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前项目有个需求:tr是后台动态生成的,当点击其中一个tr时,获取相应的数据,并在该tr下以新的tr形式展开数据,这时可能会有多个新的tr生成,当再次点击旧的tr时,这些新的tr全部折叠起来.

因为对js不是太熟练,在加上url配置错误了,弄得我花了半天时间才弄好,这里记录一下.

js代码:

$(document).ready(function() {
    var aa = 0;
     $(".gradeX").click(function(){     
     $(this).toggleClass("selected");
        var c = $(this).find('.catas').html();
        var idvalue = $(this).find('.idvalue').html();   
        if ( aa == 0 ) {
        var res = getresult(idvalue);              
        if ( res.statue == 1) {
            var tr1 = $(res.result);
            tr1.insertAfter(this);
            changeurl();
            } else {};
        aa = 1;
        changestatus(idvalue);
} else {
    $('#report').find('.resultcontent').remove();
    aa = 0;
    if (c == 'baddata') {
    location.reload();
    } else{}
}
     });
});
function getresult(val) {
    var callback = '';
    $.ajax({
    type: 'POST',
    async:false,
    url: '{% url "getresult" %}',
    data:{hostid: val, csrfmiddlewaretoken: '{{ csrf_token }}'},
    success: function(data) {
        callback = $.parseJSON(data);
    }
});
return callback;
}

function changestatus(val) {
    $.ajax({
            url: '{% url "changestatus"  %}',
            type: 'POST',
            data: {hostid: val},
            success:function (callback) {
                }
            })
};

先获取一个值,传到后台,生成json 版的tr,再在该tr下插入,其中 gradeX是要点击的tr的class,report是table的id, resultcontent是后台生成的tr的class

python代码:

def getresult(request):
    if request.method == 'POST':
        ret = {'statue': 0, 'result': ''}
        hostid = request.POST.get('hostid', )
        res = TestResult.objects.filter(testip_id=hostid).order_by('-created_at')
        result_list = ''
        if res.count() == 0:
            ret = ret
        else:
            for i in res:
                result_list += '<tr class="resultcontent"><td>记录时间:<br>' + time_change(i.pattition_time) + '</td><td><pre class="content">COOKIE:<br>' + str(i.cookie) + '</pre></td><td><pre>URL:<br>' + i.origin_url + '</pre></td><td colspan="2"><pre>REQUEST_HEADER:<br>' + i.request_header + '</pre></td><td><button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " οnclick="gethea()">打开网页</button></td></tr>'
            ret['statue'] = 1
            ret['result'] = result_list
        return HttpResponse(json.dumps(ret))