我想在使用 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 %}
如果你想访问外部Js文件上的Django变量
在js脚本标签中声明变量
<script> let url = "{% url 'app_label:my_url' %}";</srcipt>
插入您现在可以访问定义的 url 变量的外部 js 文件
external_js.js
let django_url = url;
我在使用 ajax 时遇到了同样的问题,我只是使用了搜索栏上显示的直接 url。不要使用 {% url 'myapp:search_user' %} 尝试“mymapp/search_bar”,或者它在 urls.py 文件中的显示方式。