AJAX로 JSON 양식 제출

Question

JSON 형식의 양식을 AJAX로 제출하려고합니다.

하지만 양식이 제출 될 때마다 양식 작업 페이지로 리디렉션됩니다.

는 HTML

<form id="acc" action="#" method="post" autocomplete="off">{% csrf_token %} 
      <p>Username: {{accform.username}}</p> 
      <p>Password: {{accform.password}} </p> 
      <center><input type="submit" value="update" class="button" /></center> 
     </form> 

jQuery를

$("#acc").submit(function(){ 
     username = $(this).find("#id_username").val(); 
     password = $(this).find("#id_password").val(); 
     var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password}; 
     $.post("/myaccount/", arr,function(data){ 
      alert(data); 
     }, "json"); 
     return false; 
    }); 

나는 또한 시도했다 위의 코드에 대한 대안은 다음과 같습니다

$("#acc").submit(function(){ 
       username = $(this).find("#id_username").val(); 
       password = $(this).find("#id_password").val(); 
       var arr = { "X-CSRFToken": getCookie("csrftoken"), "username": username, "password": password}; 
       $.ajax({ 
        url: '/myaccount/', 
        type: 'POST', 
        data: JSON.stringify(arr), 
        contentType: 'application/json; charset=utf-8', 
        dataType: 'json', 
        async: false, 
        success: function(msg) { 
         alert(msg); 
        } 
       }); 
       return false; 
      }); 

은 또한 것으로 나타났습니다 나는 단지 방향이 바뀐다. n csrftoken 쿠키를 받고 있습니다.

왜 그럴까요? 함수가 계산되는 동안

Answer 1

내가 사용하고 @Archer뿐만 아니라 저를 제안 당신은 당신이 작동하는지 전체 기능처럼 그것을 할 경우 $.cookie("cookie_name")

으로 쿠키를 얻을 필요 않은 일이다 this JQuery와 쿠키 라이브러리를 사용하는 경우 AJAX로 데이터를 게시 할 때 오류가 발생하지 않습니다.
또한 false를 입력하면 제출할 양식을 중지 할 수 있습니다. event.preventDefault();은 필요하지 않습니다.

전체 전체 코드는 다음과 같습니다 또한

$(function(){ 
      $("#acc").submit(function(){ 
       username = $(this).find("#id_username").val(); 
       password = $(this).find("#id_password").val(); 
       var arr = { "csrfmiddlewaretoken": $.cookie("csrftoken"), "username": username, "password": password}; 
       $.post("/myaccount/", arr,function(data){ 
        alert(data.test); 
       }, "json"); 
       return false; 
      }); 
     }); 

, 당신은 당신이 쿠키 또는 양식에 작성 <input type="hidden" name="csrfmiddlewaretoken"> 중 하나의 값을 얻을 수 있습니다 HTML 코드에서 {% csrf_token %}를 포함하는 경우.

Answer 2

첫째, 내가 제출에서 양식을 방지 할이 줄을 추가 생각 :

$("#acc").submit(function(e){ 
    e.preventDefault(); // LINE ADDED 
    /* treatment here */ 
    return false; 
}); 

을 또한, 당신의 데이터와 CSRF 토큰을 혼합 방지하기 위해, 당신은 사용하기 전에 다음 함수를 호출 할 수 있습니다 모든 Ajax 요청 : 당신이 getCookie를 사용할 때이 함수로 인식되지 않습니다 때문에 실행을 중지 자바 스크립트 때문에

var csrftoken = getCookie('csrftoken'); 
$.ajaxSetup({ 
    crossDomain: false, // obviates need for sameOrigin test 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type)) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
}); 

Answer 3

이 일어나고. 존재하는 기능으로 getCookie의 호출을 대체해야합니다.

사용이 라이브러리 ...

https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

변경 읽을 수있는 코드의 다음 줄 ...

var arr = { "X-CSRFToken": $.cookie("csrftoken"), "username": username, "password": password}; 

난 당신이 코드에서있어 있으리라 믿고있어 다른 곳에서는 유효하지 않은 경우 getCookie이 유효한 함수입니다.