Передача данных с помощью ajax в django методом post

Question

Я пытаюсь отправить данные в представление django через ajax методом POST, как я видел в одном уроке.

Код, который я сделал, является следующим (myURL - это URL, по которому я вызываю testview):

      $(document).on('submit','#form',function(e){
        e.preventDefault();

        $.ajax({
          type:'POST',
          url:'/myURL/',
          data:{
            HELLO: "I'm inside ajax data"
          },
          contentType: "application/json",
          datatype: 'json',
          sucess:function(){
            alert("Ajax pass data correctly");

          }
        })
      });
    </script>

И в django я бы назвал HELLO следующим образом.test.html - это место, где у меня есть html-форма

    if request.method == 'POST':

        takeHELLOfromajaxpost = request.POST['HELLO']

        return render(request,'test.html',{'dataTakenfromAjax':takeHELLOfromajaxpost})



    return render(request,'test.html',{}) 

. Затем я бы пометил тегами шаблон в том же HTML {{dataTakenfromAjax}}, чтобы проверить, беру ли я эти данные, но ничего не происходит!Я даже не получаю ошибки.

Answer 1

Прежде всего, вы не отправляете csrfmiddlewaretoken с вашим запросом.

Во-вторых, у вас есть опечатка в аргументе success.

В-третьих, вывероятно, ожидая, что он полностью изменит HTML?Чем вы должны добавить $("body").html() при успешном ответе.Таким образом, ваша переменная появится на странице.

test.html:

{{ dataTakenfromAjax }}

<form action="" id="form">
    {% csrf_token %}
    <button type="submit">Submit</button>
</form>
<script
        src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script>
    $(document).on('submit', '#form', function (e) {
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: '/myURL/',
            data: {
                csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
                HELLO: "I'm inside ajax data"
            },
            success: function (data) {
                $("body").html(data);
            }
        })
    });
</script>