How to use Ajax in Django

Question

I need some help here , i'm trying to make a simple POST to transfert data to view in django , and I'm getting an error ,the template contain a simple input where when we click on , the POST process start this is my template :

{% block javascript %}
    <script src="{% static 'js/test.js' %}"></script>
{% endblock javascript %}

{% block content %}
  <form method="post" enctype="multipart/form-data">

      {% csrf_token %}

  <center>
     <div class="submit-buttons">
         <input type="submit" value= "add" id="add_button" onclick="post_metadata()" />
     </div>
  </center>

 </form>-
{% endblock content %}

this is the JS block :

function getCookie(c_name){
    if (document.cookie.length > 0){
    c_start = document.cookie.indexOf(c_name + "=");

       if (c_start != -1){
         c_start = c_start + c_name.length + 1;
         c_end = document.cookie.indexOf(";", c_start);

         if (c_end == -1) c_end = document.cookie.length;
             return unescape(document.cookie.substring(c_start,c_end));
    }
}
return "";
 }


var post_metadata = function (){
        $.ajaxSetup({
            headers : {  "X-CSRFToken": getCookie("csrftoken")  }
        });
        $.ajax({
                url         : "add/",
                type        : 'POST',
                dataType    : 'json',
                data        : { '1':"ash", '2':"raph" },
                cache       : false,

                success: function(){
                    console.log("It's all right")
                },

                error: function handleFormError(jqXHR, textStatus, errorThrown){
                     console.log(jqXHR)
                     console.log(textStatus)
                     console.log(errorThrown)

    },
            }); // ajax
         };

and views file :

@csrf_protect
def add_actors_in_pool(request):
    print(">>>>>>>>>>>>>>>>> add actor <<<<<<<<<<<< ")
    print (request.POST["1"])
    print (request.POST["2"])

    return render(request, "packages/dashboard.html")


def main_view(request):
    print("<<<<<<<<<<<<<< main >>>>>>>>>>>>>>>>>>")

    return render(request, "test1.html")

filnally the console and the error : console and error

Please update your question with the actual code as text, not images. [Why not upload images of code on SO when asking a question?](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-on-so-when-asking-a-question) — str, Jul 27 '18 at 09:52
@MadhanM sorry I was trying to do it with differents ways and I forgit to change It — ASH, Jul 27 '18 at 09:52
Seems like you're getting 4XX error . what is the status message that you're getting in django's log ? — Madhan Varadhodiyil, Jul 27 '18 at 09:56
@MadhanM the status is 304 , my main probleme is that after clcking it should redirect me to packages/dashboard.html but it doesn't ,and thank you for your responses . — ASH, Jul 27 '18 at 10:02
Ajax will not redirect pages . What you get from a post is the html code from the new page inside the data object on the POST response. Please [check this](https://stackoverflow.com/questions/29137910/redirecting-after-ajax-post-in-django) — Madhan Varadhodiyil, Jul 27 '18 at 10:07
@MadhanM I meant that it's possibly that the error is in the view ( add_actor_in_pool ) — ASH, Jul 27 '18 at 10:12
@str sorry it's my first question , I will not do it again , — ASH, Jul 27 '18 at 10:13
@AchrafElAlaoui Are you getting the output for print statements in `add_actor_in_pool` method . If yes please check if [ this helpful](https://stackoverflow.com/questions/4807572/jquery-ajax-error-handling-to-ignore-aborted/15141116#15141116) — Madhan Varadhodiyil, Jul 27 '18 at 10:22
@MadhanM when I add the listener even the print output disappear , should I add django output , it's may be helpful . — ASH, Jul 27 '18 at 10:46
@AchrafElAlaoui No need to be sorry, but please update the question accordingly. Otherwise it might get closed. — str, Jul 27 '18 at 10:53
@AchrafElAlaoui yes please with Browser console's network log of xhr requests if possible please — Madhan Varadhodiyil, Jul 27 '18 at 11:00

Madhan Varadhodiyil · Accepted Answer · 2018-07-27T14:33:31.530

0

Alright Thanks @AchrafElAlaoui. Seems like you're returning html as response on a successful post, but you've specified that you're expecting json as response. It should have been dataType:"html". please check here for more details on that. Your submit function should look something like this.

var post_metadata = function (event){
event.preventDefault(); // to prevent page from reloading
    $.ajaxSetup({
        headers : {  "X-CSRFToken": getCookie("csrftoken")  }
    });
    $.ajax({
            url         : "add/",
            type        : 'POST',
            dataType: "html",  // Since you're returning html as response
            data        : { '1':"ash", '2':"raph" },
            cache       : false,

            success: function(){
                alert("It's all right");
                //window.location = "/dashboard"; // If you want to redirect on successful post.
            },

            error: function handleFormError(jqXHR, textStatus, errorThrown){
                 console.log(jqXHR)
                 console.log(textStatus)
                 console.log(errorThrown)

},
        }); // ajax
     };

edited Jul 27 '18 at 14:33

answered Jul 27 '18 at 11:51

Madhan Varadhodiyil

2,086
1
14
20

I make it html but nothing changed – ASH Jul 27 '18 at 12:06
@ASH did you get you issue fixed? – Madhan Varadhodiyil Jul 27 '18 at 14:23
I don't know what link refer to , but it gave me an error "Failed to complete tunnel connection" , PS: my server is working on 8000 – ASH Jul 27 '18 at 14:24
Can you try again please ? – Madhan Varadhodiyil Jul 27 '18 at 14:25
a prompt appear with the success message – ASH Jul 27 '18 at 14:32
I've modified your code to the one above, It posts successfully – Madhan Varadhodiyil Jul 27 '18 at 14:34
Waw , so interesting , I'm so curious about what you did , but for now I want to know what you modified in my code , I just use CTRL-C CTRL-V to your code , and nothing changed , – ASH Jul 27 '18 at 14:46
So. I modified your html (just added event param to onclick) , js (above) , didn't modify views . [Code here](https://pastebin.com/6FWikxiP) – Madhan Varadhodiyil Jul 27 '18 at 14:53
sorry for bothering you ,even if I change the JS , the same problem always stes off , what's is the cause possible ?? – ASH Jul 27 '18 at 15:50
@ASH No worries. What is the status code you're getting on browser console's network log for `/main/add`. also can I have a look at `packages/dashboard.html` please? – Madhan Varadhodiyil Jul 27 '18 at 15:57
I changes the event in HTML and the POST works for now , but the view doesn't redirect to packages/dashboard.html , this is the log line ( [28/Jul/2018 10:37:48] "POST /main/add/ HTTP/1.1" 200 5942 ) , i tried to test only the view by testing it url (main/add) and it's OK. – ASH Jul 28 '18 at 08:43
Yay. That's a relief. [Ajax will not redirect pages](https://stackoverflow.com/questions/29137910/redirecting-after-ajax-post-in-django) . You'll need to use window.location on successful post – Madhan Varadhodiyil Jul 28 '18 at 10:21
okay , I undersand that , may be I have wrong informations, but that render in the view does not serve to call a template ?? – ASH Jul 28 '18 at 10:32
You'll get that as a response for `POST` method. maybe you can append it to an div . – Madhan Varadhodiyil Jul 28 '18 at 10:36
1

Okay ,Thank you very much . – ASH Jul 28 '18 at 10:41

How to use Ajax in Django

1 Answers1