Unable to send string in HTTP POST

Question

So, I'm new to web development and I need to send a POST request to a server. Here's the code:

HTML:

<input type="text" class="form-control" placeholder="User ID" name="email" id="email">
<button class="btn btn-theme btn-block" href="#" onClick="httpPOST(email.value)" type="submit">    <iclass="fa fa-lock"></i>SIGN IN</button>

JavaScript:

function httpPOST(data)
{
    var client = new XMLHttpRequest();
    var url = "http://193.136.19.86:8080/restaurants/login/";

    client.open("POST", url, true);
    client.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    client.send(data);
}

The code works fine if in the email.value there is a number, or even a bool. For example, if I write "2" in the "email" input, the server receives it pretty well. However, when I write a real email (or other string), it gives me a 500 (INTERNAL SERVER ERROR).

Any idea on what I am doing wrong?

Here is the view of the server, developed using Django:

@csrf_exempt
def logtrans(request):
    #print(request)                                                                                                                                     
    context= RequestContext(request,{})
    d=json.loads(request.body)
    if request.method == 'POST':
        print(d)
    return HttpResponse("Done")

Thanks in advance!

Answer 1

I've never used Django myself, but I'm assuming your problem is a result of sending data using one type of encoding from your browser (URL-encoded data), but decoding a different on your server (JSON). When the data you are trying to send isn't a valid JSON string, the server throws an exception (which gives you the 500 Internal Server Error).

The solution is therefore to use a single encoding everywhere. For instance, to just use JSON everywhere, just change the following two lines in your JavaScript code:

client.setRequestHeader("Content-Type", "application/json");
client.send(JSON.stringify(data));

Answer 2

apart from your 500 or may be it can even fix it:

you better use $.ajax():

function httpPOST(data){       
   $ajax({
       url: "/restaurants/login/"; // always relative path!
       type: "post", 
       data: {data: data} 
   }).done(function(response){
       if(data.ok == 'ok'){
         alert(data.response);
       }
   });       
}

aaand your views.py

from django.core.serializers import json

@csrf_exempt
def logtrans(request):
   data = {}
   if request.method == 'POST':
       print request.POST.get('data')
       data['ok'] = 'ok'
       data['response']= 'Done'
       return HttpResponse(json.dumps(data), content_type="application/json")
   data['ok'] = 'bad'
   data['response']= 'not post request'
   return HttpResponse(json.dumps(data), content_type="application/json")

btw, i wouldnot csrf_exempt, be careful with it.

Answer 3

Code is using "Content-Type", "application/x-www-form-urlencoded" therefore your POST data should be in form of name : value pairs and urlencoded either using encodeURI(data) or escacpe(data).

This post has general answer Should I URL-encode POST data? and also has link to specific details.