Flask: don't redirect to a url()

Question

I am working on a web app which is built on flask,postgreSQL. It is used to collect lab data and manage the data collected. There are two pages in this app, which I have attached are used to show lab data of some labs chosen by the user by querying from a database.

One page(admin_select_lab_for_data.html) enables the user to select some existing labs and redirects the user to the other page(admin_edit_data.html), which shows all the data in the selected labs. When I select the labs and click the button go to lab, the browser fails to redirect to (admin_edit_data).

The outputs printed by python are all correct(which proves that in flask, the redirection happens,lab_ids are passed correctly and all the related data are queried correctly). The http request returns 200 ok. However, the browser just stay on the same page and ajax POST request alerts the error(which is inconsistent with the fact that the data have already been received by admin_select_lab_for_data).

main.py

# review/edit Data
@app.route('/admin_select_lab_for_data',methods=['GET','POST'])
def admin_select_lab_for_data():
    if request.method=='POST':
        lab_ids = []
        jsonData = request.get_json()
        lab_ids = jsonData['lab_ids']        
        return redirect(url_for('admin_edit_data',lab_ids={'lab_ids':lab_ids}))
    lab_list = []
    db_session = db.get_session()
    for lab in db_session.query(schema.Lab_info).all():
        data_num = 0
        query_rows = db_session.query(schema.Lab_rows).filter(schema.Lab_rows.lab_id==lab.lab_id)
        for r in query_rows:
            data_num += db_session.query(schema.Lab_data).filter(schema.Lab_data.row_id==r.row_id).count()
        lab_list.append({'lab_id':lab.lab_id,'lab_name':lab.lab_name,'class_name':lab.class_name,'prof_name':lab.prof_name,'data_num':data_num})
    return render_template('admin_select_lab_for_data.html',lab_list=lab_list)


# review/edit Data
@app.route('/admin_edit_data')
def admin_edit_data():
    # Get a list of lab_ids that are needed to be retrieved
    lab_ids = ast.literal_eval(request.args['lab_ids'])['lab_ids']

    # lab_ids = ['test1_101_C','test2_101_N']
    lab_data = []
    lab_data_by_student = []
    row_names_list = []
    err_msg = ''

    db_session = db.get_session()

    #Group row data according to row_name
    query_rows = db_session.query(schema.Lab_rows).filter(schema.Lab_rows.lab_id==lab_ids[0]).order_by(schema.Lab_rows.row_order)
    for r in query_rows:
        lab_data.append({'row_name':r.row_name,'row_data_list':[]})
        row_names_list.append(r.row_name)


    for lab_id in lab_ids:
        query_rows = db_session.query(schema.Lab_rows).filter(schema.Lab_rows.lab_id==lab_id).order_by(schema.Lab_rows.row_order)
        index = 0

        #Check whether these labs are compatitble with each other(the number of rows and the names of rows must be the same)
        if query_rows.count()!=len(row_names_list):
            err_msg = lab_ids[0]+' and '+lab_id+' are incompatible: the number of rows is different-'+str(query_rows.count())+' and '+str(len(row_names_list))
        else:
            for r in query_rows:
                if (row_names_list[index]!=r.row_name):
                    err_msg = lab_ids[0]+' and '+lab_id+' are incompatible:'+row_names_list[index]+' and '+r.row_name+' are different row names' 
                    break
                else:
                    query_datas = db_session.query(schema.Lab_data).filter(schema.Lab_data.row_id==r.row_id).order_by(schema.Lab_data.data_id)
                    for data in query_datas:
                        lab_data[index]['row_data_list'].append({'lab_id':lab_id,'student_name':data.student_name,'data_id':data.data_id,'row_data':data.row_data})

                index+=1
        if err_msg!='':
            return render_template('admin_edit_data.html',lab_data=lab_data,student_data=lab_data_by_student,lab_ids=lab_ids,err_msg=err_msg)




    #Group row data according to student_name
    for row in lab_data:
        #sort row_data_list to make all the data across different lists 
        sorted(row['row_data_list'],key=lambda element:element['data_id'])
        # if list is empty, add student names into it
        if not lab_data_by_student:
            for data in row['row_data_list']:
                lab_data_by_student.append({'student_name':data['student_name'],'lab_id':data['lab_id'],'row_data_list':[]})

        for i in range(len(row['row_data_list'])):
            data = row['row_data_list'][i]
            lab_data_by_student[i]['row_data_list'].append({'row_name':row['row_name'],'row_data':data['row_data']})

    print('\n\n\n')
    print(lab_ids)
    print('\n\n\n')
    print(lab_data)
    print(lab_data_by_student)
    print(lab_ids)
    print(err_msg)
    print('\n\n\n')

    return render_template('admin_edit_data.html',lab_data=lab_data,student_data=lab_data_by_student,lab_id=lab_id,err_msg=err_msg)

admin_select_lab_for_data.html

{% extends "admin_home.html" %}
{% block head %}
    <meta charset="UTF-8">
    <title>Select lab for data</title>
    <script>
        $(document).ready(function(){
            $('button[name=go_to_lab]').click(function(){
                var lab_ids = [];
                var checkboxes = document.getElementsByTagName('input')
                for (var i = 0; i < checkboxes.length; i++) {
                    if (checkboxes[i].type == 'checkbox' && checkboxes[i].checked) {
                        lab_ids.push($(checkboxes[i]).data('labid'));   
                    }
                }
                if (lab_ids.length==0){
                    $('#error_message_no_lab_choose').show().delay(1000).fadeOut();
                }
                else{
                    $.ajax({
                          type: 'POST',
                          contentType: 'application/json',
                          dataType: 'json',
                          url: 'http://127.0.0.1:5000/admin_select_lab_for_data',
                          data: JSON.stringify({'lab_ids':lab_ids}),
                          success: function(result){
                                  alert('Submit successfully');
                                },
                          error : function(result){
                                  alert('Fail to submit');
                                  console.log(result)
                                }
                    });
                }

            });
        });
    </script>
{% endblock %}

{% block content %}

    {% if (lab_list|length)==0 %}
        No lab exists<br>
    {% else %}
        <table class="table">
            <thead>
                <tr>
                    <th class="tg-yw4l">Lab Index</th>
                    <th class="tg-yw4l">Lab Name</th>
                    <th class="tg-yw4l">Class Name</th>
                    <th class="tg-yw4l">Professor Name</th>
                    <th class="tg-yw4l">Number of data available</th>   
                     <th class="tg-yw4l">Choose</th>  
                </tr>
            </thead>
            <tbody>
            {% for lab in lab_list %}
                <tr>
                    <th class="tg-yw4l">{{loop.index}}</th>
                    <td class="tg-yw4l">{{lab.lab_name}}</td>
                    <td class="tg-yw4l">{{lab.class_name}}</td>
                    <td class="tg-yw4l">{{lab.prof_name}}</td>
                    <td class="tg-yw4l">{{lab.data_num}}</td>
                    <td class="tg-yw4l"><input type="checkbox" data-labid="{{lab.lab_id}}"></td>
                </tr>
            {% endfor %}
            </tbody>    
        </table>
        <br>
        <button name="go_to_lab">Go to lab</button>
        <div class="temporary_message" id="error_message_no_lab_choose">You need to select one lab</div>

{% endif %}



{% endblock %}

admin_edit_data.html

{% extends "admin_home.html" %}
{% block head %}
    <meta charset="UTF-8">
    <title>Edit Data</title>

{% endblock %}



{% block content %}


{% if lab_data|length==0 %}
<h1> No data available for this lab </h1> 
{% elif err_msg!="" %}
<h1> {{err_msg}} <h1>
{% else %}
    <table class="table" id={{lab_id}} name={{lab_data|length}}>
        <thead>
            <tr>
              <th>Index</th>
              <th>Student Name</th>
              <th>Lab ID</th>
              {%  for r in lab_data  %}
                  <th>{{r["row_name"]}}</th>
              {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for s in student_data %}
                <tr>
                    <th>{{loop.index}}</th>
                    <td><input value={{s["student_name"]}}></td>
                    <td>{{s["lab_id"]}}</td>
                    {%  for i in range(lab_data|length)  %}
                        <td><input value={{s["row_data_list"][i]["row_data"]}}></td>
                    {% endfor %}
                    <td><button name=save_all>Save All</button></td>
                    <td><button name=delete>Delete</button></td>
                </tr>
            {% endfor %}        
        </tbody>
    </table>
    <button><a href="/admin_select_lab_for_data">Return</a></button>

{% endif%}

{% endblock %}

Answer 1

You can never achieve a page redirect as a result of an Ajax post request.

You either have to submit a regular form post and do the redirect or you need to return a result from the Ajax call and change the page using window.location in the browser.