HTML 에서 장고로부터 JSON 정보가져오기

  1. IO
  2. HTML 에서 장고로부터 JSON 정보가져오기


주의 사항

  1. 데이타를 받는 서버측의 url 과 html 테스트 주소가 같아야 한다 - 다를 경우 레스폰스 에러가 발생한다. 접근권을 설정하면 다른 url 에서도 접근할 수 있을것으로 생각된다.

장고측 


def json_response(request):
    import datetime
    now = datetime.datetime.now()

    print('def json_responsee')
    print('-'*50)
    print( request.GET.get('page')  )
    print( request.GET.get('name')  )
    print( request.GET.get('age')  )
    print('-'*50)

    result  = {}
    result.update( {'aaa' : 'aaaa'} )
    result.update( {'bbb' : 'bbbb'} )
    result.update( {'ddd' : 'dddd'} )
    result.update( {'eee' : 'eeee'} )
    result.update( {'time' : now} )

    print(result['time'])

    return JsonResponse(result)


html 설정 


{% load static i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

    <title>Title</title>
</head>
<body>

<head>

    <meta charset="UTF-8">
    <title>JQuery Intro</title>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <script>

        function test2()
        {
            console.log( '시작' );

            $.get("http://t2.amoisoo.net/sample/json/json_response/",
                { page: "cat", name: "dogs", age: 55, }, // 서버에 전송할 데이타.
                function(data, status) {
                    $("#django").html( data['time']  ); // 리턴된 값을 얻기. 
                    $("#count").html( data['aaa']  ); // 리턴된 값을 얻기.
                    $("#note").html( data['bbb']  ); // 리턴된 값을 얻기.
                }
            );
        }


    </script>

</head>

<body>


<p id="django"  >타이틀</p>
<p id="count"  ></p>
<p id="note"  ></p>


<br/><br/><a href="javascript:test2()" >test BBB</a>

</body>

</html>