如何使用Axios在Django中进行Ajax POST请求

DebugUsery
526 阅读3分钟

如何使用Axios在Django中进行Ajax POST请求

Ajax是Asynchronous JavaScript and XML的首字母缩写。它既不是一种语言，一个框架，也不是一个网络库。它是一种网络技术，可以异步地从客户端向服务器发送和接收数据，所有这些都在后台完成，不需要重新加载当前的网页。

尽管它的缩写中包括XML，但在AJAX中已经很少使用。它已被JSON（JavaScript Object Notation）所取代。与XML相比，JSON易于使用，速度更快，也更受欢迎。

什么是Axios？

Axios是一个Javascript库，用于从Node.js发出HTTP请求或从浏览器发出XMLHttpRequests。它是一个基于XMLHttpRequests服务的轻量级HTTP客户端。它类似于Fetch API，用于执行HTTP请求。

先决条件

  1. 在你的计算机上安装了[Python 3.7]或更新版本。

  2. 在你的电脑上安装了Python包管理器，[pip]。

  3. [Django]的知识。

  4. 对[JavaScript]的了解。

目标

  • 使用Axios提交一个表单。

  • 在Django中处理一个POST请求。

项目设置

首先，通过运行下面的命令确保virtualenv 已经安装在你的电脑上。

$ virtualenv --version

virtualenv 20.2.2 from /home/username/.local/lib/python3.8/site-packages/virtualenv/__init__.py

如果你收到错误信息，请运行下面的命令，在你的电脑上安装virtualenv 。

$ pip install virtualenv

在你的机器上改变到一个你选择的目录或建立一个新的目录。然后，使用virtualenv ，为我们的项目创建一个虚拟环境。

运行下面的命令来创建和激活虚拟环境。

$ virtualenv venv
$ source venv/bin/activate

我已经创建了一个启动模板，供你在本教程中学习。使用下面的命令在你的当前目录中克隆这个启动模板。

$ git clone https://github.com/atoyegbe/note-app.git

使用cd note-app 进入克隆的目录，并运行下面的命令来安装这个项目工作所需的依赖性。

$ cd note-app
$ pip install -r requirements.txt

你的项目目录应该看起来像这样。

--note-app
|    --notes
|   | ---note
|   | ---notes
|   | ---templates
|   |    --- base.html
|   |    --- home.html
|   |    --- notes.html
|   | ---db.sqlite3
|   | ---manage.py
|   .gitignore
|   requirements.txt

让我们确保在我们的应用程序中没有任何损坏，通过运行cd notes ，改变到项目目录中，并运行下面的命令。

$ python manage.py runserver

运行上面的命令后，你会在你的浏览器中看到类似这样的东西。form page

让我们进入templates/home.html 。我们将通过在</div> 关闭标签下面添加CDN脚本标签，将Axios库添加到我们的项目中。

{% include 'base.html' %}

{% block content %}

<div class="container">

     <h1> Notes </h1>

     <!-- ..... -->
     <!-- ..... -->

</div>

<!-- Adding axios script tag here-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

{% endblock %}

让我们为表单添加一个事件监听器，将数据发送到Django服务器端。添加下面的代码，就在Axios脚本标签的下面。

<script>
let form = document.getElementById('form'); // selecting the form

form.addEventListener('submit', function(event) { // 1
    event.preventDefault()
    
    let data = new FormData(); // 2
    
    data.append("title", document.getElementById('title').value)  
    data.append("note", document.getElementById('note').value)
    data.append("csrfmiddlewaretoken", '{{csrf_token}}') // 3
    
    axios.post('create_note/', data) // 4
     .then(res => alert("Form Submitted")) // 5
     .catch(errors => console.log(errors)) // 6

})

</script>

上面的代码

  • 1 - 给表单添加一个提交事件监听器。
  • 2 - 在JavaScript中创建一个新的表单。
  • 3 - 添加一个CRSF标记。如果我们不包括这个，我们会得到一个403 forbidden response ，我们将无法提交表单的数据。
  • 4 - 这里我们使用axios.post 方法来提交表单数据。
  • 5 - 如果表单提交成功，浏览器上会弹出一个Form Submitted 的警告信息。
  • 6 - 如果在提交表单时发生错误，这将捕捉到并在控制台显示错误。

在Django视图中处理Post请求

导航到note 目录，将下面的代码添加到views.py 。

from django.http import JsonResponse 
#....
#....
def createNote(request):
    if request.method == 'POST': 
        title = request.POST.get('title') 
        note = request.POST.get('note’) 
        Note.objects.create(
            title=title,
            note=note
        )
    return JsonResponse({"status": 'Success'})

在note/urls.py ，编辑代码，使其看起来像下面的片段。

from django.urls import path 
from .views import *
urlpatterns = [
    path('', homepage, name="home"),
    path('notes/', notes, name="notes"),

    path('create_note/', createNote, name="note" ) #add this 
]

让我们测试一下我们的表单。首先，通过运行下面的命令启动项目开发服务器。

$ python manage.py runserver

填写表格并提交。你应该看到你的浏览器上弹出一个Form Submitted 的提示信息。

在你的浏览器上导航到**http://127.0.0.1:8000/notes/**。如果你的表格按预期工作，你应该看到你提交的笔记的细节。

这就是了。

avatar
文章
阅读
粉丝