如何在 Django 中使用 Ajax

Question

我在这里需要一些帮助，我正在尝试做一个简单的 POST 来传输数据以在 django 中查看，但我收到了一个错误，模板包含一个简单的输入，当我们点击时，POST 过程开始 这是我的模板：

{% 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 %}

这是 JS 块：

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

并查看文件：

@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")

最后是控制台和错误： console and error

Answer 1

好的，谢谢@AchrafElAlaoui。似乎您正在返回 html 作为对成功帖子的响应，但您已指定您期望 json 作为响应。应该是dataType:"html"。 please check here 了解更多详情。您的提交函数应该看起来像这样。

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