django使用ajax传输数据-优快云博客

本文提供了一个使用HTML和Django实现AJAX GET和POST请求的详细示例，包括前端代码和后端视图处理，展示了如何从前端发起请求并处理后端返回的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML文件ajax get例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax get</title>
    {#必须先引入jQuery库#}
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    {# jQuery ajax get 请求练习  #}
    <script>
        $(document).ready(function () {
            $("#test").click(function () {   //用id或者标签名都可以
            {#$("button").click(function () {#}
                $.get("/jQuery_get/",function () {
                    {#alert("hhah");#}
                    res = {{ res|safe}}; //从后台传过来的数据，必须放在这里面
                    console.log(res.data); //为什么没有打印出来
                    alert("数据："+res.data+"\n状态："+res.status);
                });
            });
        });
    </script>
</head>
<body>
<button id="test">测试发送一个jQuery的ajax get请求，并获取返回结果</button>
</body>
</html>

HTML文件ajax post例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax post</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                $.ajax({
                    type:"POST",
                    url:"/jQuery_post/",
                    {#加上这个传入数据不能显示alert#}
                    {#data:{'name':naddme},#}
                    {#dataType:"json",#}
                    success:function () {
                        res = {{ res|safe }}; //从后台获取的数据
                        {#alert("hahha")#}
                        alert("数据："+res.data+"\n状态:"+res.status)
                    }
                });
            });
        });
    </script>
</head>
<body>
<button id="test">post请求</button>
</body>
</html>

Django后台view文件

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.shortcuts import render


def jQuery_get(request):
    res = {"data": "这是后台返回的数据","status": "true"}
    #  向js中传递数据必须json.dumps()处理
    return render(request, 'jQuery_get.html', {'res': json.dumps(res)})

def jQuery_post(request):
    res = {"data": "这是post请求后，后台返回的数据","status": "true"}
    #  向js中传递数据必须json.dumps()处理
    return render(request, 'jQuery_post.html', {'res': json.dumps(res)})

配置好路由后访问