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

2017-09-26 08:13:24来源:CSDN作者:grs294845170人点击

分享

目前项目有个需求: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 " onclick="gethea()">打开网页</button></td></tr>'            ret['statue'] = 1            ret['result'] = result_list        return HttpResponse(json.dumps(ret))

主要是注意多个tr之间的连接.




最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台