使用 django url 方案和 Javascript fetch API

问题描述 投票:0回答:2

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

我遵循了本教程(法语抱歉),其中作者很容易实现它。 这里展示

示例代码:

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 %}
django fetch-api
2个回答
2
投票

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

在js脚本标签中声明变量

<script> let url = "{% url 'app_label:my_url' %}";</srcipt>

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

external_js.js

let django_url = url;

0
投票

我在使用 ajax 时遇到了同样的问题,我只是使用了搜索栏上显示的直接 url。不要使用 {% url 'myapp:search_user' %} 尝试“mymapp/search_bar”,或者它在 urls.py 文件中的显示方式。

© www.soinside.com 2019 - 2024. All rights reserved.