programing

장고, 아약스, jQuery를 사용하여 페이지를 새로 고치지 않고 양식을 제출하는 방법?

javamemo 2023. 11. 1. 21:56
반응형

장고, 아약스, jQuery를 사용하여 페이지를 새로 고치지 않고 양식을 제출하는 방법?

저는 장고랑 일하는 신입입니다.간단한 예가 필요합니다.장고, 아약스, jQuery를 사용하여 페이지를 새로 고치지 않고 양식(게시물)을 제출하는 방법?

양식, 보기 및 템플릿입니다.

views.py

from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        else:
            message = 'something wrong!'


        return render_to_response('contact/advert.html',
                {'message':message},
            context_instance=RequestContext(request))

    else:
        return render_to_response('contact/advert.html',
                {'form':AdvertForm()},
            context_instance=RequestContext(request))

forms.py ("모델 양식"을 사용한 양식)

from django import forms
from django.forms import ModelForm
from linki.models import Advert


class AdvertForm(ModelForm):
    class Meta:
        model = Advert

TEMPLES (양식 html 코드)

<html>
<head>

</head>
    <body>
    <h1>Leave a Suggestion Here</h1>
        {% if message %}
            {{ message }}
        {% endif %}
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
    </body>
</html>

jquery와 함께 ajax submit을 사용할 계획이라면 당신의 보기에서 html을 반환해서는 안됩니다.대신 이렇게 해줄 것을 제안합니다.

html:

<html>
<head>
</head>
<body>
    <h1>Leave a Suggestion Here</h1>
        <div class="message"></div>
        <div>
            <form action="" method="post">{% csrf_token %}
                {{ form.as_p }}
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
</body>
</html>

js

$('#form').submit(function(e){
    $.post('/url/', $(this).serialize(), function(data){ ... 
       $('.message').html(data.message);
       // of course you can do something more fancy with your respone
    });
    e.preventDefault();
});

views.py

import json
from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        message = 'something wrong!'
        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        return HttpResponse(json.dumps({'message': message}))

    return render_to_response('contact/advert.html',
            {'form':AdvertForm()}, RequestContext(request))

그래서 당신이 응답을 그 안에 넣는 방법.messagediv. 평이한 html을 반환하는 대신 json을 반환해야 합니다.

<script type="text/javascript">
$(document).ready(function() {
    $('#form_id').submit(function() { // On form 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..
                $('#success_div').html(response); // update the DIV
            },
            error: function(e, x, r) { // on error..
                $('#error_div').html(e); // update the DIV
            }
        });
        return false;
    });
});
</script>

$('#form-id').submit(function(e){
    $.post('your/url', $(this).serialize(), function(e){ ... });
    e.preventDefault();
});

여기 그것을 위한 완벽한 튜토리얼이 있습니다.중요한 부분을 포함하겠습니다.

먼저 이 jQuery 스크립트를 에 추가합니다.main.js페이지에 연결합니다.

이 코드를 에 추가합니다.main.js(블로그 댓글을 보내기 위한 제 버전을 포함하겠습니다)

// Submit post on submit
$('#comment-form').on('submit', function(event){
    event.preventDefault();
    create_post();
});

// AJAX for posting
function create_post() {
    $.ajax({
        url : "/blogcomment/", // the endpoint
        type : "POST", // http method
        data : {
            blog_id: blog_id,
            c_name : $('#comment-name').val(),
            c_email:  $('#comment-email').val(),
            c_text:  $('#comment-text').val(),
        }, // data sent with the post request

        // handle a successful response
        success : function(json) {
            $('#comment-name').val(''); // remove the value from the input
            $('#comment-email').val(''); // remove the value from the input
            $('#comment-text').val(''); // remove the value from the input
            $('#comment-form').prepend("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button>" + json.result +"</div>");
        },

        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('#comment-form').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>&times;</button>Oop! Error happend!</div>"); // add the error to the dom
            //console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
}

나의views.py댓글을 받는 것은 다음과 같습니다.

def get_blog_comment(request):
    if request.method == 'POST':
        blog_id = request.POST.get('blog_id') 
        user = request.POST.get('c_name')
        email = request.POST.get('c_email')
        comment = request.POST.get('c_text')
        date = jdatetime.datetime.now().strftime("%Y-%m-%d");
        response_data = {}
        blogcomment = Comments(blog_id = blog_id, date = date, name = user, email = email, comment_text = comment)
        blogcomment.save()

        response_data['result'] = 'Success!!.'

        return HttpResponse(
            json.dumps(response_data),
            content_type="application/json"
        )
    else:
        return HttpResponse(
            json.dumps({"nothing to see": "this isn't happening"}),
            content_type="application/json"
        )

그리고 마지막으로 url part for.urls.py이는 원래 자습서에 포함되어 있지 않습니다.

path('blogcomment/', views.get_blog_comment, name='get_blog_comment'),

추가하는 것을 잊지 마세요.csrf_token에게ajax우편 요청

이렇게 하면 재장전 없이 안전하게 양식을 제출할 수 있습니다.

Script.js에서

jQuery.noConflict()
jQuery(document).ready(($) => {
    $("#contactUsForm").on("submit", () => {
        var el = document.getElementsByName("csrfmiddlewaretoken");
        csrf_value = el[0].getAttribute("value");
        $.ajax({
            url: "/contactUs/",
            type: "POST",
            data: {
                userName: $("#userName").val(),
                companyName: $("#companyName").val(),
                emailAddress: $("#emailAddress").val(),
                message: $("#message").val(),
                'csrfmiddlewaretoken': csrf_value
            },
            success: function (json) {
                console.debug(json)
                console.debug("Successfully send contact form")
            },
            error: function (json) {
                console.error(json)
                console.error("Error occured while sending contact form")
            }
        })

        return false;
    })
})

Views.py 에서

def contactUs(request: HttpRequest):
    print("Contact Us")
    if request.method == "POST":
        username = request.POST.get("userName")
        companyName = request.POST.get("companyName")
        emailAddress = request.POST.get("emailAddress")
        message = request.POST.get("message")

        print(username)
        print(companyName)
        print(emailAddress)
        print(message)
        response_data = {}
        response_data['result'] = 'Success!!.'
        return HttpResponse(
            json.dumps(response_data),
            content_type="application/json"
        )
        pass
    else:
        logger.error(
            f"Contact US request method {request.method} is not Valid expected POST")
    
    return redirect("/")

언급URL : https://stackoverflow.com/questions/11647715/how-to-submit-form-without-refreshing-page-using-django-ajax-jquery

반응형

'programing' 카테고리의 다른 글

윈도우용 단말기 크기를 c로 얻는 중?  (0) 2023.11.01
LIMT와 함께 MariaDb UPDATE를 찾을 수 없습니다.  (0) 2023.11.01
문자열 크기를 바이트 단위로 구하는 방법은?  (0) 2023.11.01
매개 변수화된 sql 쿼리 느리고 활성화된 오라클 세션의 최대 절전 모드  (0) 2023.11.01
여러 템플릿이 포함된 AngularJS 지시문  (0) 2023.11.01

'programing'의 다른글

  • 현재글장고, 아약스, jQuery를 사용하여 페이지를 새로 고치지 않고 양식을 제출하는 방법?

관련글

댓글

티스토리툴바