Django Ajax Get Request (Example code)

example_ajax_view.py

# It is just a example and not completed code
from django.http import JsonResponse

def ix_detail_pix(request, *args):
    """ Ajax PIX info if clicked on PIX """
    pix_uuid = request.GET['pix']

    data = {}

    pix_infos = get_pix_amounts_info(pix_uuid)

    data['asn_amount'] = pix_infos['asn_amount']
    data['mlpav4_amount'] = pix_infos['mlpav4_amount']
    data['mlpav6_amount'] = pix_infos['mlpav6_amount']
    data['bilateral_amount'] = pix_infos['bilateral_amount']
    data['switch_set'] = get_switch_infos(pix_uuid)

    return JsonResponse(data)

static_ajax_js.js

// It is just a example and not completed code
$('document').ready(function() {
	var last_clicked = ''
	var pix_clicked = ''
	
	//Actions if click to see PIX information
	$(".pix-info").click(function(e){
		last_clicked = pix_clicked;
		pix_clicked = $(this).attr("id");
		
		/***************************** 
		*** AJAX request PIX click ***
		*****************************/
		$.ajax({
		    url: '/core/'+code+'/ajax/pix-detail/',
		    data: {
		      'pix': pix_clicked,
		    },
		    dataType: 'json',
		    success: function (data) {
		    	if (data != {}) {
		    		// Function to apply the jQuery logic
		    		ShowDataOnRequest(data);
				} else {
					alert("This PIX doesn't have any info.");
				}
	    	}
	  	});

	});

	pix_clicked = '';
	
	/********************************
	*** Function to show PIX Data ***
	********************************/
	function ShowDataOnRequest(data){
		// If Last PIX clicked is different of actual click it 
		// will append informations bhrought trhought request 
		// and show off them witha new style
		if(last_clicked != pix_clicked){
			$(".asn-info-"+pix_clicked).append(data.asn_amount);
			$(".atmv4-info-" + pix_clicked).append(data.mlpav4_amount);
			$(".atmv6-info-" + pix_clicked).append(data.mlpav6_amount);
			$(".bilateral-info-" + pix_clicked).append(data.bilateral_amount);

			for(index in data.switch_set){
				$(".switchs-info-" + pix_clicked).append(
					"<li><a class='data-switch' href='#' style='text-decoration: underline;'>" 
					+ data.switch_set[index].management_ip + 
					'</a>  ' + data.switch_set[index].model + 
					" has " + data.switch_set[index].available_ports + 
					" available ports</li>");
			}
			
			$(".info-" + pix_clicked).show();
			
			$("#" + pix_clicked + ", .info-" + pix_clicked).addClass("channel-list");
			$(".icon-" + pix_clicked + "> i").removeClass("fa-chevron-circle-down");
			$(".icon-" + pix_clicked + "> i").addClass("fa-chevron-circle-up");
			// Verify if it is not the first click of user, 
			// to not apply this into nothing, because doens't exist last PIX clicked yet.
			if(last_clicked != '') {
				$(".info-" + last_clicked).hide();
				
				$(".asn-info-" + last_clicked).empty();
				$(".atmv4-info-" + last_clicked).empty();
				$(".atmv6-info-" + last_clicked).empty();
				$(".bilateral-info-" + last_clicked).empty();
				$(".switchs-info-" + last_clicked).empty();
				
				$("#" + last_clicked + ", .info-" + last_clicked).removeClass("channel-list");
				$(".icon-" + last_clicked + "> i").removeClass("fa-chevron-circle-up");
				$(".icon-" + last_clicked + "> i").addClass("fa-chevron-circle-down");
			}
		// Else it is user has clicked in the same PIX, 
		// not having been necessity of make a new AJAX request.
		// Just show again the informations.
		} else {
			$(".info-" + pix_clicked).toggle();
			
			//This if and else is just to fake toggle h6 style 
			if(!$(".info-" + pix_clicked).is(':visible')){
				$("#" + last_clicked + ", .info-" + last_clicked).removeClass("channel-list");
				$(".icon-" + last_clicked + "> i").removeClass("fa-chevron-circle-up");
				$(".icon-" + last_clicked + "> i").addClass("fa-chevron-circle-down");
			
			} else {
				$("#" + pix_clicked + ", .info-" + pix_clicked).addClass("channel-list");
				$(".icon-" + pix_clicked + "> i").removeClass("fa-chevron-circle-down");
				$(".icon-" + pix_clicked + "> i").addClass("fa-chevron-circle-up");
			}
		}	
	}
});

test_ajax_request_example.py

# It is just a example and not completed code
def test_ix_view(self):
        ix = self.response.context['ix']
        self.assertEqual(ix.code, 'cpv')
        self.assertEqual(ix.ipv4_prefix, '12.0.0.0/22')
        self.assertEqual(ix.ipv6_prefix, '2001:12f2::0/64')
        amount_production_tags = self.response.context['amount_production_tags']
        self.assertEqual(amount_production_tags, 3)
        amount_available_tags = self.response.context['amount_available_tags']
        self.assertEqual(amount_available_tags, 1)
        c = Client()
        resp = c.generic('GET', '/core/cpv/ajax/pix-detail/?pix=' + str(self.pix_tchaikovsky.uuid))
        context = ast.literal_eval(resp.content.decode('UTF-8'))
        self.assertEqual(context['asn_amount'], 4)
        self.assertEqual(context['mlpav4_amount'], 3)
        self.assertEqual(context['mlpav6_amount'], 1)
        self.assertEqual(context['bilateral_amount'], 1)
        self.assertEqual(context['switch_set']['0']['model'], '[ASR9002]')
        self.assertEqual(context['switch_set']['0']['management_ip'], '192.168.0.201')

url_ajax_example.py

# It is just a example and not completed code

ix_urls = [
    url(r'^ix/([a-z]{2,4})/$',
        ix_views.IXDetailView.as_view(),
        name='ix-detail'),

    url(r'^ix/(?P<code>[a-z]{2,4})/(?P<asn>[\d]+)/$',
        as_views.ASIXDetailView.as_view(),
        name='ix-as-detail'),

    url(r'^ix/(?P<code>[a-z]{2,4})/(?P<asn>[\d]+)/stats/$',
        ix_views.IXStatsView.as_view(),
        name='ix-as-stats'),

    url(
        regex=r'^([a-z]{2,4})/ajax/pix-detail/$',
        view=ix_views.ix_detail_pix,
        name='ix_detail_pix'
    ),
]