将 django url 方案与 Javascript 一起使用 API

Question

我想在使用 fetch API 时使用 django url 方案，但它不被理解，我最终得到了一个转义 URL.

我关注了this tutorial (in french sorry) in which the author achieve it very easily. Demonstrated here

示例代码：

document.querySelectorAll('.list-group-item-action').forEach(
    elem => {
        elem.addEventListener("click", event => {
            event.preventDefault();
            let url = "{% url 'myapp:search_user' %}"
            const request = new Request(url, {method: 'POST', body: formData});
            fetch(request)
               .then(response => response.json())
               .then(result => {
                  console.log(result)
               })
        })
    })

最终出现控制台错误：

POST http://127.0.0.1:8000/myapp/actions/%7B%%20url%20'myapp:search_user'%20%%7D 404 (Not found)

当然，我的 URL 是在 url.py 中声明的，并且在模板中使用时效果很好。

如果我用相对路径替换“url”，它工作正常，但这对 Django 不友好。

我错过了什么？

编辑：

这是HTML代码

{% extends 'myapp/base/base.html' %}

{% load static %}

{%  block headers %}
{% endblock %}


{%  block heading %}
    <h1 class="h3 mb-0 text-gray-800">MyApp - Actions</h1>

{%  endblock %}


{%  block content %}
  <div class="container">
<div class="row">
  <div class="col-lg-4">
    <div class="card">
      <h5 class="card-header">
        {{ title }}
      </h5>


    <form method="POST">
{% csrf_token %}
    </form>
      <div class="list-group list-group-flush">
        {% for action in action_list %}
        <a href="{{ action.dest }}" class="list-group-item list-group-item-action">{{ action.display }}</a>
        {% endfor %}
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="form-floating">
      <textarea class="form-control" placeholder="Enter list here.." id="user-data" style="height: 150px"></textarea>
      <label for="floatingTextarea2">List</label>
    </div>
  </div>

</div>

  <div class="bg-white col-lg-12" id="target_div">
  </div>


  </div>
{% endblock %}


{% block scripts %}
  <script src={% static "js/actions.js" %}></script>


{% endblock %}

Answer 1

如果要访问外部Js文件上的Django变量

在js脚本标签中声明变量 <script> let url = "{% url 'app_label:my_url' %}";</srcipt>

插入您现在可以访问定义的 url 变量的外部 js 文件

external_js.js

let django_url = url;

Answer 2

我在使用 ajax 时遇到了同样的问题，我只是使用了搜索栏中显示的直接 url。而不是 {% url 'myapp:search_user' %} 试试 "mymapp/search_bar" 或者它在你的 urls.py 文件中的样子。

将 django url 方案与 Javascript 一起使用 API

Using django url scheme with Javascript fetch API

django

fetch

fetch-api