使用 Django 通过 AJAX URL 传递参数

Question

Below is my code. 'n' logs correctly in the console, and everything works perfectly if I manually enter the value for 'n' into url: '{% url "delete_photo" iddy=2%}' . Alas, when I try to use 'n' as a variable (seen below) it gives me a reverse match not found error. Can anyone help with this?

javascript

 function test(n){
    console.log(n);
    $.ajax({
      type: 'get',
      url: '{% url "delete_photo" iddy=n%}',

      datatype:'json',
      success: function(data){
                alert(n)
                console.log(data)
                console.log(n)
                },
      error: console.log("SSS"),

    });}

html

{% for t in photos %}
<div id="photobox" ><img id="img_pb3"src="{{t.photo.url}}">
<div><a><span onclick="test({{t.id}})" class="closeBtn">&times;</span></div></a>
</div>
{% endfor %}

urls

urlpatterns = [
     path('', views.explore, name='explore'),
     path('home/', views.home, name='home'),
     path('home/comment', views.comment, name='comment'),
     path('home/photo_del/<iddy>', views.delete_photo, name='delete_photo')
]

views

def delete_photo(request, iddy):

    data = {'a':iddy, 'b': iddy}
    return JsonResponse(data, safe=False)

Answer 1

You can't possibly do this. You have fundamentally misunderstood the relationship between backend Django code and front-end Javascript code. Django templates are fully evaluated on the server, at which point the template tags are converted into plain HTML text. There is therefore no way that a Javascript function - which runs much, much later, on the browser itself - can pass a parameter to be used in a template tag.

The only way to do this would be to render the URL with a dummy value - one you know can't occur in the URL itself - and then replace that value in the JS with the one from the parameter, using normal JS string replace functions.

To be honest, it would be better to remove the ID from the URL altogether. Apart from anything else, a delete action should be a POST, not a GET - you don't want the Googlebot accidentally crawling your URLs and deleting all your items - and with a POST you can send the ID in the posted data.

Answer 2

Maybe something like this:

    <a class="closeBtn" href="{% url 'delete_photo' iddy=t.id %}" id="{{t.id}}"></a>

And then you can retrieve the reference using attr:

$.ajax({ 
url: $('.closeBtn').attr("href"),
data: { "iddy": $('.closeBtn').attr("id")},
.....

})