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

 更新时间:2024年05月21日 11:29:31   作者:wanghuizheng  
AJAX是一种用于创建交互式网页应用程序的技术,它允许在不重新加载整个页面的情况下向服务器发送和接收数据,本文给大家介绍Django使用AJAX向服务器发起请求的操作方法,感兴趣的朋友跟随小编一起看看吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

什么是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文件,及其中的脚本语言如下:

<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>
<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函数如下

@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如下

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

到此这篇关于Django使用AJAX向服务器发起请求的文章就介绍到这了,更多相关Django服务器发起请求内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 谈谈你对aja的理解(一、二)

    谈谈你对aja的理解(一、二)

    Ajax是Asynchronous Javascript And XML的缩写,其作用通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。
    2015-10-10
  • 完美解决ajax访问遇到Session失效的问题

    完美解决ajax访问遇到Session失效的问题

    下面小编就为大家带来一篇完美解决ajax访问遇到Session失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用jQuery简化Ajax开发

    使用jQuery简化Ajax开发

    jQuery 是一个JavaScript 库,它有助于简化 JavaScript&#8482; 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。
    2009-11-11
  • ajax跨页面提交表单

    ajax跨页面提交表单

    这篇文章主要为大家详细介绍了ajax跨页面提交表单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Ajax+PHP简单基础入门实例教程

    Ajax+PHP简单基础入门实例教程

    Ajax 由 HTML、JavaScript&#8482; 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax,最核心的一个对象是XMLHttpRequest,所有的ajax操作都离不开对这个对象的操作。
    2008-12-12
  • Ajax校验是否重复的实现代码

    Ajax校验是否重复的实现代码

    这篇文章主要介绍了Ajax校验是否重复的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • ajax实现文件异步上传并回显文件相关信息功能示例

    ajax实现文件异步上传并回显文件相关信息功能示例

    这篇文章主要介绍了ajax实现文件异步上传并回显文件相关信息功能,结合实例形式分析了基于jQuery $.ajax方法的文件异步上传以及后台java程序对文件信息的读取与显示相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • Ajax实现城市二级联动(三)

    Ajax实现城市二级联动(三)

    这篇文章主要为大家详细介绍了Ajax实现城市二级联动的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • springmvc 发送ajax出现中文乱码的解决方法汇总

    springmvc 发送ajax出现中文乱码的解决方法汇总

    本文给大家介绍四种方法解决springmvc 发送ajax出现中文乱码问题,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-03-03
  • 浅谈Ajax请求与浏览器缓存

    浅谈Ajax请求与浏览器缓存

    下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论


http://www.vxiaotou.com