Ajax | kjg's blog

Ajax简介

前后端如何交互

前后端交互一般就是两种:

是通过表单的提交，表单提交：通过前端设计表单而后端通过get或post获取信息，这是前端传数据给后端。
Ajax技术。所以Ajax是用于前后端交互的一门技术。Ajax是异步的JavaScript和XML，前端通过ajax给服务器发送请求，并获取服务器的响应数据。

后端可以通过表单获取前端数据，但是后端却没办法将数据返回给html，所以有了jsp，但是jsp复杂而且无法实现前后端分离，前端不清楚后端代码，所以jsp代码也要交给后端，那不就向全栈靠拢了。而Ajax的出现则实现了前后端的分离。

Ajax与Json

Ajax的异步可以在不重新加载页面的情况下与服务器实现交互并更新部分网页，比如在百度的输入框输入“老坛酸菜”，下面立马能够联想出“老坛酸菜怎么了”“315”等等，这就是异步。
有了Ajax，那么就可以实现 html + Ajax + 后端的结构，一般Ajax交由前端工程师，后端只需简单获取数据并返回数据就可以了。
那么json是什么呢？json是JavaScript的对象表示法，是一种数据的载体。比如前端通过Ajax发送数据，或者后端返回数据给前端，那双方各玩各的怎么行呢（也不是各玩各的，人家是使用xml为载体传输，但是json比较优秀，语法简单，可读性强，能减少传输时占用的宽带，现在json几乎已经成了主流），所以统一数据的格式，一起使用json，前端用json的规范来写JavaScript，后端也将返回的数据转化成json的格式，那不就皆大欢喜了。
总之ajax和json两者不是同一个层面的东西，没法比较，只能说清二者是不同的技术。json跟xml才有可比性。最后，要是有哪里讲错了也希望大家能在评论区指出。

Ajax请求

浏览器向网站发送请求时：URL 和表单的形式提交。

GET
POST

特点：页面刷新。

除此之外，也可以基于Ajax向后台发送请求（偷偷的发送请求）。

依赖jQuery 【不依赖也行,但依赖了操作就非常简单】

编写ajax代码

$.ajax({
    url:"发送的地址",
    type:"get", 
    data:{  //要传递的数据
        n1:123,
        n2:456
    },success:function(res){
        console.log(res);
    }
})

Ajax发送GET请求

{% block js %}

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

from django.shortcuts import render, HttpResponse

def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了")

Ajax发送POST请求

{% block js %}

$.ajax({
    url: '/task/ajax/',
    type: "post",
    data: {
        n1: $("#btn1").val(),
        n2: $("#form3").serialize() //适用于 form3标签内的属性很多的情况,效果同多个 $("#btn1").val()
    },
    success: function (res) {
        console.log(res);
    }
})
 
{% end block %}

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


@csrf_exempt
def task_ajax(request):
    print(request.POST)
    return HttpResponse("成功了")

Ajax绑定事件

基于J Q u e r y

{% 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: $("#btn1").val(),
                        n2: 456
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

    </script>
{% endblock %}

数据交换格式 JSON

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


def task_list(request):
    """ 任务列表 """
    return render(request, "task_list.html")


@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)

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

{% 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: $("#btn1").val(),
                        n2: 456
                    },
                    dataType: "JSON"
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

    </script>
{% endblock %}

案例: 任务管理

html页面

{%  extends 'layout.html' %}
{%  block style %}
    <style>

    </style>
{%  endblock %}

{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                <form  id="formAdd" novalidate>
                    <div class="clearfix">
                        {% for field in form %}
                            <div class="col-sm-6" style="position: relative" >
                                <div style="margin-top: 15px">{{ field.label }}:</div>
                                {{ field }}
                                <span class="error-msg" style="color: red; position: absolute"></span>
                            </div>
                        {% endfor %}
                        <div class="col-xs-12" style="margin-top: 15px">
                            <button id="btnAdd" type="button" class="btn-primary" style="margin-top: 10px ">提交</button>
                        </div>

                    </div>

                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">
        $(function (){
            // 页面框架加载完成后代码自动执行

            bindBtnAddEvent();

        })

        function bindBtnAddEvent() {
            $("#btnAdd").click(function () {
                $(".error-msg").empty();
                $.ajax({
                    url: '/task/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("添加成功");
                            // 用JS实现页面的刷新
                            location.reload();
                        } else {
                            $.each(res.error, function (name, data) {
                                // console.log(name,data);
                                $("#id_" + name).next().text(data[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}

task.py

import json

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

from app01.utils.form import TaskModelForm


def task_list(request):
    """ 任务列表 """
    form = TaskModelForm()
    return render(request, "task_list.html", {"form": form})


@csrf_exempt
def task_add(request):
    # {'level': ['1'], 'title': ['sdfsdfsdfsd'], 'detail': ['111'], 'user': ['8']}
    print(request.POST)

    # 1.用户发送过来的数据进行校验（ModelForm进行校验）
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))

    data_dict = {"status": False, 'error': form.errors}  # data_dict 即是前端页面的 res
    return HttpResponse(json.dumps(data_dict))

数据统计

需要使用第三方插件,两种:

highchart
echarts, 百度开源 https://echarts.apache.org/