Django高级扩展之静态文件和ajax使用

作者：System 时间：2024年08月17日分类：所有,ajax 字数：1410




# views.py
from django.shortcuts import render
from django.http import JsonResponse
 
def index(request):
    return render(request, 'index.html')
 
def get_data(request):
    # 假设这里从数据库或其他服务获取数据
    data = {'key': 'value'}
    return JsonResponse(data)
 
# urls.py
from django.urls import path
from .views import index, get_data
 
urlpatterns = [
    path('', index, name='index'),
    path('get_data/', get_data, name='get_data')
]
 
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index Page</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#myButton').click(function(){
                $.ajax({
                    url: '{% url "get_data" %}',
                    type: 'GET',
                    success: function(data) {
                        console.log(data);
                        $('#myDiv').text(data.key);
                    },
                    error: function(){
                        alert('Error occurred');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Get Data</button>
    <div id="myDiv"></div>
</body>
</html>

这个示例展示了如何在Django项目中使用AJAX来异步获取服务器数据，并更新页面上的元素。同时，也演示了如何通过Django的JsonResponse返回JSON数据。注意，这里使用了JQuery库，确保在HTML中正确引入。

Django高级扩展之静态文件和ajax使用

评论已关闭

推荐阅读