Jquery Post is returning error instead of data

Question

I have one application on Django running as backend and one another project for front-end presentation. For back-end project is exposed to rest using django-rest-framework and authentication method is token based.

Main project core is running at 127.0.0.1:8000 and presentation project is working at 127.0.0.1:8001. Now When I create Simple page on cms and put HTML form as code provided below, its works fine and return token. But the issue is that it redirect to 127.0.0.1:8000 because url is given in form action.

<form action="http://127.0.0.1:8000/api-token-auth/" class=" form-inline" method="post" id="loginform">

    <div id="div_id_username" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Username:</label>
            <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
        </div>
    </div>
    <div id="div_id_password" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Password:</label>
            <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
        </div>
    </div>
    <div class="form-actions-no-box">
         <button type="submit" title="Get Token">POST</button>
    </div>
</form>

Response upon submission is:

{'token':'fdsf4d6a4d6a4d64ad4ada54d65a4'}

Now When I changed this code to jquery Post:

Code:

<form action="http://127.0.0.1:8000/api-token-auth/" class=" form-inline" method="post" id="loginform">

    <div id="div_id_username" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Username:</label>
            <input style="height: 25px" type="text" name="username" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_username">
        </div>
    </div>
    <div id="div_id_password" class="clearfix control-group">
        <div class="controls">
            <Label class="span4">Password:</label>
            <input style="height: 25px" type="password" name="password" maxlength="100" autocapitalize="off" autocorrect="off" class="textinput textInput" id="id_password">
        </div>
    </div>
    <div class="form-actions-no-box">
         <button type="button" title="Get Token" onclick="submitme('http://127.0.0.1:8000/api-token-auth/', 'loginform')">POST</button>
    </div>
</form>

and Jquery function called on click:

function submitme(url, formid)
{
    $.post(url, $("#" +formid).serialize())
            .done(function() { alert("second success"); })
            .fail(function(jqXHR, textStatus, errorThrown) { alert(textStatus); alert(errorThrown);})
            .always(function() { alert("finished"); }
        );
    location.reload();
}

It shows error as textStatus but errorThrown is Empty.

*Problem could be that jquery ajax post does not support cross domain query?

• Any Solution?

I have updated function to this but still not working.

function submitme(url, formid)
{
    $.ajax({
        url: url,
        type: 'POST',
        data: $("#" +formid).serialize(),
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function(data) {
             alert(data);
        }
    });
}
function callback(data)
{
    alert(data);
}

Any other solution?

Answer 1

$.post don't support Cross domain request.

Use get request

Example

$.ajax({
        url: url,
        type: 'GET',
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success: function(data) {
             alert(data)
        } 
    });

Answer 2

The form is submitting after the submit button is clicked, causing the ajax call to fail. Use preventDefault to stop the default action of the form.

HTML

<button type="button" title="Get Token" 
    onclick="submitme(event,'http://127.0.0.1:8000/api-token-auth/',
         'loginform')">POST</button>

Javascript

function submitme(e, url, formid)
{
    e.preventDefault();
    $.post(url, $("#" +formid).serialize())
            .done(function() { alert("second success"); })
            .fail(function(jqXHR, textStatus, errorThrown) { alert(textStatus); alert(errorThrown);})
            .always(function() { alert("finished"); }
        );
    location.reload();
}