广告位联系
返回顶部
分享到

Django使用AJAX向服务器发起请求的操作方法

Ajax 来源:互联网 作者:佚名 发布时间:2024-05-23 21:38:44 人浏览
摘要

AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术,它允许在不重新加载整个页面的情况下向服务器发送和接收数据。通过 AJAX,网页可以异步地向服务器发起请求并在

AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术,它允许在不重新加载整个页面的情况下向服务器发送和接收数据。通过 AJAX,网页可以异步地向服务器发起请求并在后台进行处理,然后在不刷新页面的情况下更新页面的部分内容。

具体来说,AJAX 主要由以下几个核心技术组成:

  • JavaScript:AJAX 的核心是 JavaScript,它负责在客户端(浏览器)发起请求、处理响应,并更新页面的内容。
  • XMLHttpRequest对象(XHR):XHR 是在 JavaScript 中用于向服务器发起 HTTP 请求和接收响应的对象。通过 XHR,JavaScript 可以在后台与服务器进行通信,获取数据并更新页面。
  • HTML(或XML):通常情况下,服务器响应会以 HTML 或 XML 格式返回数据。HTML 格式的响应可以直接用于更新页面的内容,而 XML 格式的响应通常需要 JavaScript 进行解析后再进行处理。
  • CSS:有时候,也会使用 CSS 来实现页面的动态效果,以增强用户体验。

AJAX 技术的主要优点包括:

  • 提升用户体验:通过异步加载数据,可以减少页面的加载时间和带宽消耗,从而提升用户体验。
  • 减少服务器负载:不需要重新加载整个页面,可以减少服务器的请求量,降低服务器负载。
  • 增强页面交互性:可以在不刷新整个页面的情况下动态地更新页面的部分内容,增强了页面的交互性和实时性。

总的来说,AJAX 技术使得网页能够更快速、更动态地与用户交互,为用户提供更加流畅和友好的使用体验。

实例

在网页页面有一个信息列表,点击列表中的编辑图标后,向服务器发送请求,由视图函数处理后,更新数据库记录,并且刷新页面。

1、html文件,及其中的脚本语言如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<table class="table table-hover">

    <tr>

        <td>序号</td>

        <td>栏目名称</td>

        <td>操作</td>

    </tr>

    {% for column in columns %}

    <tr>

        <td>{{ forloop.counter }}</td>

        <td>{{ column.column }}</td>

        <td>

            <a name="edit" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="edit_column(this, {{ column.id }})">

                <span class="fas fa-pencil-alt"></span>

            </a>

            <a name="delete" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="del_column(this, {{ column.id }})">

                <span class="fas fa-trash-alt" style="margin-left: 20px;"></span>

            </a>

        </td>

    </tr>

    {% empty %}

    <p>还没有设置栏目,太懒了。</p>

    {% endfor %}

    </table>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<script>

    function edit_column(element, columnId) {

        // 获取当前行的文档名称单元格

        const currentRow = element.closest('tr');

        const nameCell = currentRow.querySelector('td:nth-child(2)');

        // 获取当前文档名称

        const currentName = nameCell.textContent;

        // 弹出 Prompt 对话框,获取新的文档名称

        const newName = prompt('请输入新的栏目名称:', currentName);

        // 如果用户点击了确定并输入了新名称,更新表格中的文档名称

        if (newName !== null && newName.trim() !== '') {

            const trimmedName = newName.trim();

            // 发送 AJAX 请求更新数据库,在fetch后支出了提交的url,由该url确定由那个view函数处理提交

            fetch(`/article/update-column/`, {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                    'X-CSRFToken': getCookie('csrftoken')  // Django 的 CSRF token

                },

                body: JSON.stringify({

                                current_name: currentName,

                                new_name: trimmedName

                                }) //发送到后台的是一个字典,键current_name值是column的旧名称,键new_name值是column的新名称

            }).then(response => {

                if (response.ok) {

                    // 更新成功,更新表格中的文档名称

                    nameCell.textContent = trimmedName;

                    alert('栏目名称更新成功');

                } else {

                    // 更新失败,处理错误

                    alert('更新失败,请重试');

                }

            }).catch(error => {

                console.error('Error:', error);

                alert('更新失败,请重试');

            });

        }

    }

    function del_column(element, columnId) {

        // 实现删除功能的逻辑

        console.log('删除栏目 ID:', columnId);

    }

    // 获取 CSRF token 的函数(Django)

    function getCookie(name) {

        let cookieValue = null;

        if (document.cookie && document.cookie !== '') {

            const cookies = document.cookie.split(';');

            for (let i = 0; i < cookies.length; i++) {

                const cookie = cookies[i].trim();

                if (cookie.substring(0, name.length + 1) === (name + '=')) {

                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                    break;

                }

            }

        }

        return cookieValue;

    }

</script>

 

2、view函数如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

@csrf_exempt

@login_required

def update_column(request):

    if request.method == 'POST':

        try:

            data = json.loads(request.body)

            current_name = data.get('current_name') #提交数据字典中的current_name

            new_name = data.get('new_name') #提交数据字典中的new_name

            changed_column = ArticleColumn.objects.get(user = request.user, column=current_name)

            changed_column.column = new_name

            changed_column.save()

            return JsonResponse({'status': 'success'})

        except ArticleColumn.DoesNotExist:

            return JsonResponse({'status': 'error', 'message': 'ArticleColumn not found'}, status=404)

        except Exception as e:

            return JsonResponse({'status': 'error', 'message': str(e)}, status=500)

    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)

3、url如下

1

path('update-column/', views.update_column, name='update_column'),


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • Django使用AJAX向服务器发起请求的操作方法
    AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术,它允许在不重新加载整个页面的情况下向服务器发送和接收数据
  • AJAX原理以及axios、fetch区别

    AJAX原理以及axios、fetch区别
    AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎),通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,
  • Ajax实现上传图像功能

    Ajax实现上传图像功能
    最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
  • Ajax的疑难杂症介绍

    Ajax的疑难杂症介绍
    跨域问题 如图所示,这是通过jquery封装的ajax请求了一个本地的php文件(无框架),console提示CORS策略已阻止来自来源的null:请求的资源上不
  • 前端实现滑动按钮AJAX与后端交互的代码

    前端实现滑动按钮AJAX与后端交互的代码
    html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1
  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果
    (tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现) 效果图 首先准备两个服务端文件,另一个文件太长,这里就不
  • AJAX实现指定部分页面刷新效果的代码

    AJAX实现指定部分页面刷新效果的代码
    需求:点击左边的选项,不需要整个页面刷新,只进行右边页面的刷新。 这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF
  • Ajax实现三级联动的代码

    Ajax实现三级联动的代码
    一、导入数据表和gson.jar 该表包括了中国所有的
  • AJAX实现注册验证用户名的代码
    功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可用,否则
  • react axios跨域访问一个或多个域名问题的详解
    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: proxy:http://iot-demo-web-dev.autel.com, //当然,这里是一
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计