jquery 와 django 는 ajax 통신 을 실현 합 니 다.

앞 에 쓰기:
웹 에 서 는 보통 http 프로 토 콜 의 get / post 파일 을 통 해 데 이 터 를 보 내 거나 요청 합 니 다.브 라 우 저 에 url 을 입력 하면 브 라 우 저 는 get 요청 의 전송 과 파일 에 대한 분석 을 완성 하고 업데이트 인터페이스 를 새로 고 치 는 데 도움 을 줍 니 다.그러나 인터페이스 를 업데이트 하지 않 으 려 면 get 이나 post 파일 을 보 내 서버 에 데 이 터 를 전송 하고 서버 가 되 돌아 오 는 response 파일 을 가 져 오 려 고 합 니 다.이 럴 때 ajax 기술 로 이 루어 집 니 다.
ajax 를 실현 하 는 방법 은 두 가지 가 있 습 니 다. 하 나 는 원생 의 자바 script 으로 보 내 는 것 입 니 다. 이런 방법 은 비교적 번 거 로 우 므 로 을 참고 할 수 있 습 니 다.다른 하 나 는 jquery 를 사용 하여 ajax 를 밀봉 하 는 방법 으로 사용 하기 가 더욱 간단 합 니 다. 본 고 는 주로 jquery 의 ajax 방법 으로 django 배경 과 통신 하 는 방법 을 소개 합 니 다.
1. 필요 설명
다음 폼 데이터 a 와 b 를 서버 에 보 냅 니 다. 서버 쪽 django 는 데 이 터 를 받 고 a + b 의 결 과 를 계산 하 며 json 형식 으로 response 파일 에 붙 여 되 돌려 줍 니 다.전단 에서 되 돌아 오 는 결 과 를 받 은 후 페이지 를 새로 고치 지 않 은 상태 에서 결 과 를 표시 합 니 다.

a:  

b:  

result: 
ajax  

이 과정 은 3 단계 로 나 뉜 다. 전단 에서 HTTP 파일 을 보 내 고 django 는 HTTP 파일 을 받 으 며 HTTP RESPONSE 파일 을 되 돌려 주 고 전단 에서 RESPONSE 를 받 아 결 과 를 표시 한다.
2. 전단 송신 데이터
데 이 터 를 보 내 는 데 는 get 과 post 두 가지 방법 이 있 는데 그 에 대응 하 는 두 가지 jquery 방법 은 'get () 과' post () '입 니 다. 그 중 하 나 를 선택 하면 됩 니 다.또한 $. ajax () 방법 도 있 습 니 다. 이 방법 은 더욱 유연 하고 post 와 get 을 보 낼 수 있 으 며 body 의 파일 형식 도 사용자 정의 할 수 있 습 니 다.
2.1 $. get 을 통 해 HTTP GET 보 내기
jquery 는 get 방법 을 봉 인 했 습 니 다. 이 방법 을 통 해 get 파일 을 보 낼 수 있 습 니 다.상세 소 개 는 < ahref = "http://www.ziqiangxuetang.com/jquery/jquery− ajax − get − post. html "> <. get 설명 >
# sum 에 click 이벤트 추가

    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });

a = 5, b = 6 을 입력 하고 ajax 제출 을 클릭 하면 다음 과 같은 HTTP GET 파일 을 보 냅 니 다.

GET /ajax/add/?a=5&b=6 HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Accept: */*
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

get () 이 get 파일 의 url 에 url 과 데 이 터 를 추가 하여 보 낸 것 을 알 수 있 습 니 다.그 중에서 function (ret) 은. get () 의 반전 함수 로 그 역할 은 뒷글 에서 소개 합 니 다.
2.2 $. post 를 통 해 HTTP POST 보 내기
jquery 는. post 방법 을 봉 하여 이 방법 을 통 해 post 파일 을 보 낼 수 있 습 니 다.상세 소 개 는 < ahref = "http://www.ziqiangxuetang.com/jquery/jquery− ajax − get − post. html "> 《. post 설 명 》
# sum 에 click 이벤트 추가

    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.post("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });

a = 5, b = 6 을 입력 하고 ajax 제출 을 클릭 하면 다음 과 같은 HTTP POST 파일 을 보 냅 니 다.

POST /ajax/add/ HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 7
Accept: */*
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.130 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/ajax/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: csrftoken=OTKs7zAcHysRAV8S35mZRkKQ8FW7rhTN

a=5&b=6

$. post () 는 지정 한 url 에 HTTP POST 를 보 내 는 데 도움 을 주 었 습 니 다. 데 이 터 는 post 파일 의 body 에 놓 여 있 습 니 다.
2.3 $. ajax () 를 통 해 GET / POST 보 내기
$. ajax () 상세 설명 참조http://www.ziqiangxuetang.com/jquery/ajax-ajax.html">" jQuery ajax () 방법 ", 이 예 에서 코드 는 다음 과 같 습 니 다.

    
    $(document).ready(function(){
      $(" rel="nofollow"#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.ajax({
            type:"GET",
            url:"/ajax/add/",
            data:{"a":a, "b":b},
            data-type:"json",
            success: function(ret){
                    $('#result').html(ret.result)
                     }
        })
      });
    });
    

3. django 수신 및 복귀 RESPONSE
우선 url 설정 에 요청 에 응답 하 는 url 을 추가 하여 해당 하 는 보기 함 수 를 지정 합 니 다.

urlpatterns = [
     ..
     url(r'^ajax/add/', views.ajax_test_add, name = 'ajax_test_add'),
]

3.1 get 요청
views. py 에서 해당 하 는 응답 함 수 를 정의 합 니 다:

def ajax_test_add(request):
    a = int(request.GET.get('a'))
    b = int(request.GET.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

이렇게 하면 django 는 2.1 의 HTTP GET 를 받 으 면 다음 과 같은 RESPONSE 로 돌아 갑 니 다.

HTTP/1.0 200 OK
Date: Tue, 11 Aug 2015 13:55:00 GMT
Server: WSGIServer/0.1 Python/2.7.6
X-Frame-Options: SAMEORIGIN
Content-Type: application/json

{"result": 11}

3.2 post 요청
django 에서 post 에 csrf 보 호 를 추 가 했 기 때문에 views. py 의 응답 함 수 는 @ csrf exempt 장식 기 를 추가 해 야 합 니 다. 구체 적 으로 다음 과 같 습 니 다.

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def ajax_test_add(request):
    a = int(request.POST.get('a'))
    b = int(request.POST.get('b'))
    return_json = {'result':a+b}
    return HttpResponse(json.dumps(return_json), content_type='application/json')

이렇게 하면 django 는 2.2 에 있 는 HTTP POST 를 받 으 면 3.1 에 있 는 똑 같은 RESPONSE 로 돌아 갑 니 다.
4. 리 셋 함수 결과 표시
. get (),. post (),. ajax () 에는 모두 function (ret) 함수 가 있 습 니 다. get () 을 예 로 들 면:

    $(document).ready(function(){
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        $.get("/ajax/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret.result)
        })
      });
    });

function (ret) 은. get () 의 리 셋 함수 로 response 를 받 으 면 자동 으로 이 함 수 를 실행 합 니 다. get ()response 파일 headers 의 Content - Type 이 가리 키 는 body 형식 에 따라 body 를 해당 대상 에 봉 하여 리 셋 함수 에 전달 합 니 다. 예 를 들 어 Content - Type: application / json, ret 는 json 대상 이 고 Content - type: text, ret 는 문자열 입 니 다.
이 예 에서 반전 함수 에 서 는 결 과 를 \ # result 요소 에 표시 합 니 다. ret 는 자바 script json 대상 이기 때문에 ret. result 로 대응 하 는 값 을 얻 을 수 있 습 니 다.
참고 문장

[1]《django ajax》：http://www.ziqiangxuetang.com/django/django-ajax.html

[2]《jquery ajax》：http://www.ziqiangxuetang.com/jquery/jquery-ajax-intro.html

기타 관련 글

[1] 원생 자바 script 으로 ajax 통신 실현:http://www.ziqiangxuetang.com/ajax/ajax-tutorial.html

[2] javascript json 텍스트 분석:http://www.ziqiangxuetang.com/json/json-tutorial.html

[3] javascript xml 텍스트 분석:http://www.ziqiangxuetang.com/ajax/ajax-xmlfile.html

사유 지도