python - ajxa 的初步认识

from django.shortcuts import render, HttpResponse, redirect


def task_list(request):

    return render(request, 'task.html')

def task_ajax(request):
    print(request.GET)
    return HttpResponse('测试成功')

 

html 文件

{% extends 'layout.html' %}

{% block content %}

        <div class="panel panel-default">
            <div class="panel-heading">  <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> ModelfORM新建靓号</div>
        </div>

        <form method="post" novalidate>
            {% csrf_token %}

            {% for field in form %}
                <div class="form-group">
                    <label for="exampleInputEmail1"> {{ field.label }}</label>
                     {{ field }} <span style="color: #f90">{{ field.errors.0 }}</span>
              </div>
            {% endfor %}

              <button type="submit" class="btn btn-primary">提交</button>
        </form>


        <hr>

        <div class="panel panel-default">
          <div class="panel-heading"> 案例1 ajax学习之路  </div>
          <div class="panel-body">
                <input type="button" class="btn btn-danger" value="点击"  onclick="clickMe();" />
          </div>
        </div>




{% endblock%}

{% block js %}
    <script type="text/javascript">
        function clickMe(){
            //console.log() 返回
            //console.log('点击了按钮');
            $.ajax({
                url: '/task/ajax/',
                type: 'get',
                data:{
                    n:123,
                    m:456,
                },
                success:function (res){
                    console.log(res);
                }

            })
        }
    </script>
{% endblock %}

 

jq 绑定事件

html 文件 

{% extends 'layout.html' %}

{% block content %}



        <hr>

        <div class="panel panel-default">
              <div class="panel-heading"> 案例1 ajax学习之路 - dom 属性绑定事件  </div>
              <div class="panel-body">
                    <input type="button" class="btn btn-danger" value="点击"  onclick="clickMe();" />
              </div>
        </div>

        <hr>

         <div class="panel panel-default">
              <div class="panel-heading"> 案例2 ajax学习之路 - jq 绑定事件  </div>
              <div class="panel-body">
                    <input type="button" id="btn1" class="btn btn-danger" value="点击" />
              </div>
        </div>


{% endblock%}

{% block js %}
    <script type="text/javascript">

        $(function (){
            bindBntEvent();
        })

        function bindBntEvent(){
            $('#btn1').click(function (){
                $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data:{
                    n:123,
                    m:456,
                },
                success:function (res){
                    console.log(res);
                }
                })
            })
        }


        function clickMe(){
            //console.log() 返回
            //console.log('点击了按钮');
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data:{
                    n:123,
                    m:456,
                },
                success:function (res){
                    console.log(res);
                }

            })
        }

    </script>
{% endblock %}