Django中Ajax的使用

最新推荐文章于 2025-03-21 23:06:09 发布

忘尘~

最新推荐文章于 2025-03-21 23:06:09 发布

阅读量4.9k

点赞数 1

分类专栏： # Django 文章标签： Ajax Django

本文链接：https://blog.csdn.net/BobYuan888/article/details/84250116

版权

Django 专栏收录该内容

9 篇文章

订阅专栏

一、前端代码

1、jquery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="button" onclick="AjaxSubmit();" value="提交">

<script src="/static/js/jquery.min.js"></script>
<script>
    function AjaxSubmit(){
        /*1、post方式发送数据*/
        $.ajax({
            url:"test_ajax/",                 // 相当于form 中的 action
            type:'POST',                  // 相当于form 中的 method
            data:{'key':'value'},         // 数据
            dataType: "json",             // 注意这个定义的是返回值的类型，不是发送数据的类型，如果返回类型不是json类型，则会进入error函数
            headers: { "X-CSRFToken": "{{ csrf_token }}" },//Django中表单提交都需要csrf验证
            success: function (arg) {     // 后端返回成功后的回调函数,data为后端传来的数据
            }
            error：function(){
            }
        });
        /*2、get方式请求数据*/
        $.ajax({
            url:"test_ajax/",                  
            type:'GET',                       
            success: function (data) {     
            }
        });
    }
</script>

</body>
</html>

2、js实现（比较麻烦，推荐用jquery）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajax1()
        {
            var request;
            if(window.XMLHttpRequest)            //首先创建XHR对象
            {
                request = new XMLHttpRequest();  //IE7+,Firefox,Chrome,Qpera,Safari
            }
            else
            {
                request =new ActiveObject("Microsoft.XMLHTTP");   //兼容IE5,IE6
            }
            //1、"GET"方法
            request.open("GET","test_ajax/",true)     //初始化一个请求
            request.send();                      //将请求发送到服务器
            //2、"POST"方法
            //request.open("POST","test_ajax/",true)
            //request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //设置http的头信息，告诉web服务器要发送一个表单
            //request.send("name=小明&age=11"); 
            request.onreadystatechange = function()
            {
                if(request.readyState===4 && request.status===200)
                {
                    var text = request.responseText;
                    document.getElementById("div1").innerHTML= text;
                }
            }
        }

    </script>
</head>
<body>
    <input type="button" value="点一下" onclick="ajax1()">
    </br>
    <div id="div1"></div>
</body>
</html>

二、后端代码

1、url.py

from django.urls import path
from views import TestAjaxView

urlpatterns = [
    path('test_ajax/', TestAjaxView.as_view(), name='test_ajax'),
]

2、views.py

from django.http import HttpResponse, JsonResponse
from django.views.generic.base import View


class TestAjaxView(View):
    def get(self, request):
        return HttpResponse("helloworld!")
    def post(self, request):
        value = request.POST.get('key', '')
        # 返回json格式数据
        data = {}
        data['name'] = name
        data['age'] = age
        return JsonResponse(data)