Json

Aug. 7, 2020

Front-End
Back-End

example json usage

Basic JSON usage example in Django environment

The general scheme by which JSON string converting works is design below:

In this page, we had sent to the server the javascript object:

{proposition:"We Want This Text Into Lower Case",number:"3.14"}

and received json is:

The result is dispayed below.

Client source is:

Html

<p><div id="info1"></div></p>
<p><div id="info2"></div></p>

Javascript

<script>

function message1(msg){
    document.getElementById('info1').innerHTML = msg;
}

function message2(msg){
    document.getElementById('info2').innerHTML = msg;
}


function getXHR(){
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { //code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

xhr = getXHR();
if(!xhr) message("Ajax is not supported by your browser!");

xhr.onload = function() {
    if (xhr.status === 200){
	message1(xhr.responseText);
	var newArray = JSON.parse(xhr.responseText);
	newProposition = newArray['proposition'];
	newNumber = newArray['number'];
	message2("New proposition is: "+newProposition+".  New number is: "+newNumber);
    }
    else{
        message1("Error " + xhr.status);
	message2("Error " + xhr.status);
    }
}

xhr.onerror = function() {
    message1("Error: No response from server.");
    message2("Error: No response from server.");
}

// Send data to server
xhr.open('POST', '../../../send_data/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
//=========================================================================
/****  include  in template  ****/
var csrf_token = document.getElementsByName("csrfmiddlewaretoken")[0].value;
/****  render csrf in views.py  ****/
//var csrf_token = "..."
xhr.setRequestHeader("X-CSRFToken", csrf_token );
//=========================================================================

var myArray = {proposition:"We Want This Text Into Lower Case",number:"200"}

json = JSON.stringify(myArray);

xhr.send(json);

</script>

and server source is:

def send_data(request):
    jsonStr = request.body

    myDictionary = json.loads(jsonStr)

    proposition = myDictionary['proposition']
    number = myDictionary['number']
    proposition = proposition.lower()
    number = math.pi
    myDictionary['proposition'] = proposition
    myDictionary['number'] = number

    jsonStr = json.dumps(myDictionary)

    return HttpResponse(jsonStr)

Return to home