Javascript, Html, Dango data transition[2]

my/bs/urls.py

## ajax 1
url(r'^bs6$', views.bs_bs6, name="bootstrap_bs6"),
url(r'^add/$', views.add, name="bootstrap_add"),
url(r'^ajax_dict/$', views.ajax_dict, name="bootstrap_ajax_dict"),
url(r'^ajax_list/$', views.ajax_list, name="bootstrap_ajax_list"),

my/bs/views.py

#######################################################################
## Ajax_1
#######################################################################
from django.http import HttpResponse
try:
    from django.http import JsonResponse
except ImportError:
    from .tool import JsonResponse


def bs_bs6(request):
    return render(request, 'bs6.html')

def add(request):
    a = request.GET['a']
    b = request.GET['b']
    a = int(a)
    b = int(b)
    return HttpResponse(str(a+b))

def ajax_dict(request):
    name_dict = {'twz': 'Love python and Django', 'zqxt': 'I am teaching Django'}
    #return HttpResponse(json.dumps(name_dict), content_type='application/json')
    return JsonResponse(name_dict)

my/static/html/bs6.html

<body>
  <p>Input two numbers please!</p>

  <form action="/bs/add/" method="get">
      a: <input type="text" id="a" name="a"> <br>
      b: <input type="text" id="b" name="b"> <br>
      <p>result: <span id='result'></span></p>
      <button type="button" id='sum'>提交</button>
  </form>

  <div id="dict">Ajax 加载字典</div>
  <p id="dict_result"></p>

  <div id="list">Ajax 加载列表</div>
  <p id="list_result"></p>

  <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
      $(document).ready(function(){
        // 求和 a + b
        $("#sum").click(function(){
          var a = $("#a").val();
          var b = $("#b").val();

          $.get("/bs/add/",{'a':a,'b':b}, function(ret){
              $('#result').html(ret);
          })
        });

        // 字典 dict
        $('#dict').click(function(){
            $.getJSON('/bs/ajax_dict/',function(ret){
                //返回值 ret 在这里是一个字典
                $('#dict_result').append(ret.twz + '<br>');
                // 也可以用 ret['twz']
            })
        })
      });
  </script>
  </body>

Javascript, Html, Dango data transition[2]

my/bs/urls.py

my/bs/views.py

my/static/html/bs6.html

猜你喜欢