当前位置： 移动技术网 > IT编程>脚本编程>Python > Django ajax 简单介绍

Django ajax 简单介绍

2019年05月31日  | 移动技术网IT编程  | 我要评论

puppetsho,王煜全,守护甜心98集

ajax

asynchronous javascript and xml是 "异步javascript和xml"。即使用 javascript 语言与服务器进行异步交互，传输的数据为xml。

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

优点：
ajax使用javascript技术向服务器发送异步请求；
ajax无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以ajax性能高；
缺点：
ajax并不适合所有场景，很多时候还是要使用同步交互；
ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为ajax是在浏览器中使用javascript技术完成的，所以还需要处理浏览器兼容性问题；

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 文件夹中添加 文件

<!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 上修改

from django.http import httpresponse
from django.shortcuts import render

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

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

ajax 发送post请求

修改 文件

<!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,'')

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

在 settings.py 文件中注释

   #'django.middleware.csrf.csrfviewmiddleware',


您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网