Django ajax 简单介绍

时间 2020-05-29

原文原文链接

AJAX

Asynchronous Javascript And XML是 "异步Javascript和XML"。即便用 Javascript 语言与服务器进行异步交互，传输的数据为XML。html

同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求；异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。ajax

优势： AJAX使用Javascript技术向服务器发送异步请求； AJAX无须刷新整个页面；由于服务器响应内容再也不是整个页面，而是页面中的局部，因此AJAX性能高；缺点： AJAX并不适合全部场景，不少时候仍是要使用同步交互； AJAX虽然提升了用户体验，但无形中向服务器发送的请求次数增多了，致使服务器压力增大；由于AJAX是在浏览器中使用Javascript技术完成的，因此还须要处理浏览器兼容性问题；django

大概步骤： step 1: var xmlhttp=XMLHttperquest() step 2: xmlhttp.open("") step 3: xmlhttp.send("name=klvchen") # 请求体的内容若是为 GET 请求则为 send(null) step 4: if(xmlhttp.readyState===4 && xmlhttp.status===200) # 监听浏览器

ajax 发送GET请求

建立一个 Ajax_lesson 项目和 app01 应用修改 urls.py 文件服务器

from django.contrib import admin
from django.urls import path
from app01 import views

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

在 tempates 文件夹中添加 index.html 文件app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
</body>

<script>
    function createXMLHttpRequest() {
            var xmlHttp;
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                try {
                    // 适用于IE6
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try {
                        // 适用于IE5.5，以及IE更早版本
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {

                    }
                }

            }

            return xmlHttp;
        }

    function func1() {
        var xmlhttp = createXMLHttpRequest()
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var data = xmlhttp.responseText;
                alert(data);
            }
        }
        xmlhttp.open("GET", "/ajax_receive/", true);
        xmlhttp.send(null);

    }


</script>
</html>

在 views.py 上修改less

from django.http import HttpResponse
from django.shortcuts import render

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

def ajax_receive(request):
    print('ok')
    return HttpResponse("hello world2")

ajax 发送POST请求

修改 index.html 文件异步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
</body>

<script>
    function createXMLHttpRequest() {
            var xmlHttp;
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e) {
                try {
                    // 适用于IE6
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {
                    try {
                        // 适用于IE5.5，以及IE更早版本
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {

                    }
                }

            }

            return xmlHttp;
        }

    function func1() {
        var xmlhttp = createXMLHttpRequest()

        xmlhttp.open("POST", "/ajax_receive/", true);
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       
        xmlhttp.send("name=klvchen");

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var data = xmlhttp.responseText;
                alert(data);
            }
        }

    }


</script>
</html>

修改 views.py 文件性能

from django.http import HttpResponse
from django.shortcuts import render

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

def ajax_receive(request):
    if request.method=="POST":
        print("req.POST", request.POST)
    return HttpResponse("hello world2")

在 settings.py 文件中注释url

#'django.middleware.csrf.CsrfViewMiddleware',

1. Django ajax 简单介绍
2. $ajax()简单介绍
3. django简单介绍
4. Django--简单介绍
5. Django admin简单介绍
6. Django框架简单介绍
7. [Ajax]Ajax基础知识简单介绍
8. Django 和 Ajax 简介
9. Django之AJAX简介
10. 2019面试题：简单介绍下Ajax
更多相关文章...
• AJAX 简介 - PHP教程
• AJAX 简介 - ASP 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Github 简明教程