AJAX & jQuery에서 django 폼을 게시하는 방법

AJAX & jQuery에서 django 폼을 게시하는 방법

저는 django AJAX 폼 튜토리얼을 많이 확인했지만, 각각의 튜토리얼이 하나의 방법을 알려주고 있습니다.단순한 것은 하나도 없고, AJAX를 사용해 본 적이 없기 때문에 조금 혼란스럽습니다.

저는 "note"라고 불리는 모델을 가지고 있는데, 그 모델폼을 위한 모델폼입니다.템플릿 내부에 노트 요소가 (jQuery Sortables에서) stop() 신호를 보낼 때마다 django가 오브젝트를 업데이트해야 합니다.

현재 코드:

views.py

def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax:
        msg = "The operation has been received correctly."          
        print request.POST

    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)

JavaScript:

function saveNote(noteObj) {
    /*
        saveNote(noteObj) - Saves the notes making an AJAX call to django. This
        function is meant to be used with a Sortable 'stop' event.
        Arguments: noteObj, note object.
    */
    var noteID = noteObj.attr('id');

    $.post("../save_note/", {
        noteid: noteID,
        phase: "Example phase",
        parent: $('#' + noteID).parent('td').attr('id'),
        title: $('#' + noteID + ' textarea').val(),
        message: "Blablbla",
    });
}

현재 코드는 템플릿에서 데이터를 가져와 단말기에 인쇄합니다.이 데이터를 어떻게 조작해야 할지 모르겠어요.어떤 사람들은 jqueryforms를 통해 데이터를 관리하는 것을 보았습니다.

AJAX에서 보낸 데이터에 액세스하여 노트 개체를 업데이트하려면 어떻게 해야 합니까?

jQuery를 사용하고 있으므로 다음 항목을 사용하는 것이 좋습니다.

<script language="JavaScript">
    $(document).ready(function() {
        $('#YOUR_FORM').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    $('#DIV_CONTAINING_FORM').html(response); // update the DIV 
                }
            });
            return false;
        });
    });
</script>

편집

댓글에 지적된 바와 같이 위 내용이 작동하지 않을 수 있습니다.다음 사항을 시도해 보십시오.

<script type="text/javascript">
    var frm = $('#FORM-ID');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                $("#SOME-DIV").html(data);
            },
            error: function(data) {
                $("#MESSAGE-DIV").html("Something went wrong!");
            }
        });
        return false;
    });
</script>

POST 요청의 데이터에는 변수 이름을 사용하여 액세스할 수 있습니다.

request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etc

요청입니다.POST 개체를 연결할 수 없습니다.변수에 값을 할당한 후 조작해야 합니다.

이 JQuery 플러그인을 사용하면 일반 HTML 양식을 작성하여 AJAX로 "업그레이드"할 수 있습니다.코드 곳곳에 $.post가 있는 것은 좀 지루합니다.

또한 Firebug(Firefox용)의 네트워크 보기 또는 Google Chrome용 개발자 도구를 사용하여 AJAX 호출에서 전송된 내용을 볼 수 있습니다.

주의해야 할 점은 html이 모달로 snip된 형태로 폼을 반환하는 경우입니다.

Views.py

@require_http_methods(["POST"])
def login(request):
form = BasicLogInForm(request.POST)
    if form.is_valid():
        print "ITS VALID GO SOMEWHERE"
        pass

    return render(request, 'assess-beta/login-beta.html', {'loginform':form})

html 스냅을 반환하는 간단한 보기

폼 html 스냅

<form class="login-form" action="/login_ajx" method="Post"> 
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="header">Authenticate</h4>
  </div>
  <div class="modal-body">
        {%if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{%endif%}
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_email">Email</label>
            <input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}">
            {%if form.email.errors %}<div class="alert alert-danger">{{ form.email.errors }}</div>{%endif%}
        </div>
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_password">Password</label>
            <input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}">
            {%if form.password.errors %}<div class="alert alert-danger">{{ form.password.errors }}</div>{%endif%}
        </div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Sign in" class="btn btn-primary pull-right"/>
</div>
</form>

모달 포함 페이지

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog">{% include "assess-beta/login-beta.html" %}</div>

include 태그를 사용하여 페이지 로드 시 snipped를 로드하여 모달 열기 시 사용할 수 있도록 합니다.

Modal.js

$(document).on('submit', '.login-form', function(){
$.ajax({ 
    type: $(this).attr('method'), 
    url: this.action, 
    data: $(this).serialize(),
    context: this,
    success: function(data, status) {
        $('#LoginModal').html(data);
    }
    });
    return false;
});

이 경우 .on()을 사용하면 .live()와 같이 작동합니다.이 키는 버튼이 아닌 문서에 송신 이벤트를 바인드합니다.

다른 답변은 작동하므로 jQuery Form Plugin을 사용하는 것이 좋습니다.고객이 원하는 것 이상을 완벽하게 지원합니다.투고 뷰는 Django 파트에서 정상적으로 처리되며 교체되는 HTML만 반환됩니다.

서버측에서 django 코드는 다른 폼의 제출을 처리하는 것과 같은 방법으로 AJAX 투고를 처리할 수 있습니다.예를들면,

views.py

def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax():        
        print request.POST
        if note_form.is_valid():
            note_form.save()
            msg="AJAX submission saved"
        else:
            msg="AJAX post invalid"
    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)

참고폼 모델폼 따라서 저장 방법이 있습니다.「:」의해, 「」를 .save() 내가 너의 명령어를 .request.is_ajax로로 합니다.request.is_ajax())request.is_ajax는 그 에 "이러한 방법"이라는 를 확인합니다.is_ajax(이것들)

공식 예제를 포함하여 AJAX POST와 Django 형식을 사용하는 대부분의 예:

https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/ #filename-filename

지내다ModelForm.clean()하지 않았다(에러없음).form_valid,번역,ModelFormJavascript / DOM jav javAJAX 。

은 클라이언트 측 AJAX 기반 뷰 포스트를 합니다.ModelFormPOST에서 : "HTTP POST"

https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing https://django-jinja-knockout.readthedocs.org/en/latest/viewmodels.html

Jinja2와 Django Template Engine이 모두 지원됩니다.

언급URL : https://stackoverflow.com/questions/7335780/how-to-post-a-django-form-with-ajax-jquery