使用ajax post / get调用将当前表单数据发送到函数

Question

I am trying to keep track of the number of results per page as I navigate through pages by sending them to a function in Django. From my understanding the best way to do this is to use an AJAX GET or POST call, but I can't seem to get it working.

I have a function called myFunction in my views.py file that I want to pass my number of results per page to so I can manage the pagination between pages. Here is my code:

In my javascript file:

function navigate_pages() {
    $.ajax({
        url: 'autotester/myFunction',
        type: 'GET',
        data: num_results,
        success: function(data){} // I think this is legal to say
    });
}

In my HTML:

{% if page.has_previous %}
    <a href="?page={{ page.previous_page_number }} onclick="navigate_pages()">prev</a>
{% endif %}

{{ page.number }} of {{ page.paginator.num_pages }}

{% if page.has_next %}
    <a href="?page={{ page.next_page_number }}" onclick="navigate_pages()">next</a>
{% endif %}

In views.py :

def myFunction(request):
    if request.method == 'POST':
        num_results = int(request.POST.get('num_results'))
        paginator = Paginator(tuple_table, num_results)
        print "\n\POST: " + str(request.POST) + "\n\n"
    else:
        num_results = int(request.GET.get('num_results'))
        paginator = Paginator(tuple_table, 10)
        print "\n\GET: " + str(request.GET) + "\n\n"

where tuple_table is a tuple representation of a dictionary that has my objects that I am paginating. What makes me think it's not working is when I print the request.GET I don't see the num_results parameter that I thought I was passing in with my ajax call. Plus, I get an error for trying to use a NoneType (because there is no num_results parameter). I feel like Django and jQuery/Ajax should make this process relatively simple, but my total lack of experience with JavaScript is making this extremely difficult for me.

If anyone could either point out where I am going wrong or has a link to a more elegant or correct solution that would be greatly appreciated.

Answer 1

The error lies indeed within the javascript, you should pass a collection of key-value pairs instead of just a value.

Furthermore you do not want to put this on a hyperlink element, because the click on a hyperlink element a will trigger a page reload on the new url which in your case is "?page={{ page.next_page_number }}"

You might want to put it on a button element and pass the value in the ajax call:

{% if page.has_previous %}
    <button onclick="navigate_pages( {{ page.previous_page_number }})">prev</button>
{% endif %}

{{ page.number }} of {{ page.paginator.num_pages }}

{% if page.has_next %}
    <button  onclick="navigate_pages({{ page.next_page_number }})">next</button>
{% endif %}

The correct version should be:

function navigate_pages(page_number) {
    num_results=5;
    $.ajax({
        url: '/myFunction',
        type: 'GET',
        data: {
               "num_results":num_results,
               "page_num":page_number
              },
        success: function(data){} // I think this is legal to say
    });
}

Working example code