python_day21_Django-5 (ajax)

1、AJAX简介

  AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
  AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
  AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX在与后端交互的时候一定使用的是字典格式

ajax交互请求

  AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

优点

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

1.1、示例

方法一， 不带csrf

html页面
<input type="text" id="a1">+
<input type="text" id="a2">=
<input type="text" id="a3">
<input type="button" id="b1" value="ajax提交">

<script src="/static/jQuery_3.3.1.js"></script>
<script>
    $("#b1").on("click", function () {
        $.ajax({
            url: "/edit/",
            type: "get",
            data:{a1:$("#a1").val(),a2:$("#a2").val()},
            success:function (arg) {
                $("#a3").val(arg);
            }
        })
    })
</script>

app下的views.py
from django.shortcuts import render, HttpResponse

# Create your views here.
def index(request):
    return render(request, "index.html")

def edit(request):
    print(request.GET)
    a1 = request.GET.get("a1")
    a2 = request.GET.get("a2")
    a3 = int(a1) + int(a2)
    return HttpResponse(a3)

项目下的urls.py
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path("index/",views.index),
    path("edit/",views.edit),
]

局部刷新页面，赋值结果