如何在Django中使用Ajax

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

Answer 1

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
     };