ajax

1.依赖jQuery

2.编写ajax代码

            $.ajax({
                url : '发送地址',
                type : "请求方式" ,
                data : {
                    n1: 123,
                    n2: 456,
                } ,
                success: function (res) {
                    console.log(res);
                }
            })

 

GET请求

            $.ajax({
                url : '/task/ajax/',
                type : "get" ,
                data : {
                    n1: 123,
                    n2: 456,
                } ,
                success: function (res) {
                    console.log(res);
                }
            })

后台获取数据

def task_ajax(request):

    print(request.GET)

    return HttpResponse("成功了")

POST请求

            $.ajax({
                url : '/task/ajax/',
                type : "post" ,
                data : {
                    n1: 123,
                    n2: 456,
                } ,
                success: function (res) {
                    console.log(res);
                }
            })

后端

from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt  # 免除csrf 验证
def task_ajax(request):
    print(request.POST)
    return HttpResponse("成功了")

关于绑定事件

{% extends 'layout.html' %}


{% block content  %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input id="btn1" type="button" class="btn btn-primary" value="点击" />
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            // 页面框架加载完成之后自动执行
            bindBtn1Event();
        })
        function bindBtn1Event() {
                $("#btn1").click(function () {
                    $.ajax({
                    url : '/task/ajax/',
                    type : "post" ,
                    data : {
                        n1: 123,
                        n2: 456,
                    } ,
                    success: function (res) {
                        console.log(res);
                    }
                })

            })
        }



    </script>

{% endblock %}

 

ajax请求的返回值

一般都会返回JSON格式 

{% extends 'layout.html' %}


{% block content  %}
    <div class="container">
        <h1>任务管理</h1>
        <h3>示例1</h3>
        <input id="btn1" type="button" class="btn btn-primary" value="点击" />
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            // 页面框架加载完成之后自动执行
            bindBtn1Event();
        })
        function bindBtn1Event() {
                $("#btn1").click(function () {
                    $.ajax({
                    url : '/task/ajax/',
                    type : "post" ,
                    data : {
                        n1: 123,
                        n2: 456,
                    } ,
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })

            })
        }



    </script>

{% endblock %}

　　

import json
from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse


@csrf_exempt  # 免除csrf 验证
def task_ajax(request):
    print(request.GET)
    print(request.POST)

    data_dict = {"status": True, 'data': [11,22,33] }
    return HttpResponse(json.dumps(data_dict))