Question posted in
You can find the official documentation here.

How to send a simple data by Ajax jQuery to views.py in Django? – Jquery ajax

I want to send a simple data (a number) from home.html to a function in views.py by using Ajax jQuery. But it seems that the the function is not being called.

home.html:
I get the success response correctly. I see the tagID on the success notification. I want to see that in my views.py

...
function GetInfo(e){
                document.getElementById("test3").innerHTML = e.target.myCustomID;
                var tagID = e.target.myCustomID;

        $.ajax({
            url: 'Ajax1',
            type: "POST",
            data: {
                'tagID': tagID,
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            success: function (data) {
                alert ("Congrats! You sent some data: " + tagID);}
            ,
            error: function() {
                 alert ("Something went wrong");
             }
                })};

views.py:
I want to see that this function is called by the ajax. So if the command print ("AAAAAAAAAAAAA") works, I am happy!

...
@csrf_exempt
def Ajax1(request):
    print ("AAAAAAAAAAAAA")
    if request.is_ajax() and request.POST():
        print("BBBBBBBBBBBBB")
        TagID = request.POST.get('tagID', None)
    else:
        raise Http404

my_app/urls.py

urlpatterns = [
    url(r'', views.home_map, name="home"),
    url(r'^ajax/$', views.Ajax1, name="Ajax")
]

urls.py

urlpatterns = [
    path(r'', include('my_app.urls')),
    path('admin/', admin.site.urls),
    path(r'^ajax/$', Ajax1, name='Ajax')
]

would you please let me know what I am missing? thanks

UPDATE

Based on the kind suggestions, I made some changes. Still this is not working.

**views.py: **

def ajax1(request):
    TagIDD = request.POST['object_type']
    print("AAAAAAAAAAAAAAAAA", TagIDD)
    if request.is_ajax() and request.method == "POST":
        print("BBBBBBBBBBBBB")
        TagID = request.POST.get('tagID')
    else:
        raise Http404
    # TagID = request.POST('tagID')
    print ("Hello")
    print(TagID)

    response = {
        'TagID': TagID
    }
    return HttpResponse(response)

home.html

    function GetInfo(e){
                document.getElementById("test3").innerHTML = 
                 e.target.myCustomID;
                const tagID = e.target.myCustomID;

                $.ajax({
                        type: "POST",
                        url: "{{ 'ajax-view/' }}",

                        data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        'tagID': tagID
                         },
                        success: function (data) {
                            alert ("Congrats! You sent some data: " + 
                                       tagID);}
                        ,
                        error: function() {
                              alert ("Something went wrong");}
                        })
                };

 </script>

my_appurls.py:

urlpatterns = [
    url(r'', views.home_map, name="home"),
    url('ajax-view/', views.ajax1, name='ajax-test-view')
]

urls.py:

urlpatterns = [
    path(r'', include('wrms01_map.urls')),
    path('admin/', admin.site.urls),
]

Still, it seems that the ajax is not calling the function "ajax1" in views.py. But I can see the success notification. Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, it seems that I had a mistake in urls.py

    urls.py:

    urlpatterns = [
    path('', views.home_map, name='home.html'),
    path('admin/', admin.site.urls),
    path('ajax-view/', views.ajax1)
    # path('ajax/', ajax1, name='ajax1')
]

    home.html:

                        $.ajax({
                        type: "POST",
                        url: '{{ "ajax-view/" }}',

                        data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        'tagID': tagID
                         },
                     success: function (data) {
                             alert ("Congrats! You sent some data: " 
                                    +tagID)
                    ,
                        error: function() {
                              alert ("Something went wrong");}
                        })
                };

  2. 0

    You are doing the ajax call wrong. You have to pass the EXACT URL of your endpoint inside the url:”

    What you have done is passing a string ‘Ajax1’ which inside your urls.py is no where to be found. In you urls.py you have ‘ajax’ as the url pattern and Ajax1 is your view function name.

    Also what I observe inside your urls.py you have same patterns for 2 different view methods (this is a bad practise).

    For now do this inside your ajax

    $.ajax({
            url: "{%url 'Ajax'%}",  //This is the jinja template tag that will automatically fill in the url pattern from your urls.py corresponding to the name of that url pattern
            type: "POST",
            data: {
                'tagID': tagID,
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            success: function (data) {
                alert ("Congrats! You sent some data: " + tagID);}
            ,
            error: function() {
                 alert ("Something went wrong");
             }
  })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search