Handle data received by AJAX

Question

Good afternoon, I am sending a value via AJAX/Jquery that triggers me the controller notifications index function. When I receive a certain value, I want the function to direct me to another page. It turns out that when I receive this value, the function does not redirect me to another page but prints me that page on the console. How do I direct me to the page?

The code I’m using is as follows::

$( document ).ready(function() {
        $('#notifications').click(function(){
          $.ajax({
            url: '<?=base_url("notificacoes")?>',
            type: 'POST',
            data: {
              key: 'olá'
            },
            success: function(data) {
              console.log(data);
            }
          });
        });   
      });

Controller :

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Notificacoes extends CI_Controller {
    public function index(){
        return $this->load->view('norm');
    }
}

Knob :

<button class="btn btn-secondary pr-2" type="button" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-bell" aria-hidden="true"></i>
                    <span class="badge">0</span>
                    </button>

Answer 1

AJAX has the main purpose of making requests without the need to reload the page, that is, the values returned from the server after the request will be handled by the client without the need for them to be rendered by the server.

To solve your problem, it is not necessary to use ajax in this request, because you will ask the server a page directly instead of making the request, receive the response to then redirect.

You can do it using Jquery:

$(document).ready(function() {
  $('#notifications').click(function() {
    window.location.href = '<?= base_url("notificacoes") ?>'
  });
});

Or using the HTML attribute itself onclick:

<button class="btn btn-secondary pr-2" type="button" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="javascript:location.href='<?= base_url("notificacoes") ?>'">
    <i class="fa fa-bell" aria-hidden="true"></i>
    <span class="badge">0</span>
</button>

Answer 2

You can do as follows if you want to validate what is coming from ajax you can put what came from ajax in a variable as in the return example and make an if checking if it is what you want, if it is directed to the desired url:

$( document ).ready(function() {
        $('#notifications').click(function(){
          $.ajax({
            url: '<?=base_url("notificacoes")?>',
            type: 'POST',
            data: {
              key: 'olá'
            },
            success: function(data) {
              var retorno = JSON.parse(data);
                    if (retorno == 'ok') {
                        window.location.href = "http://...";
                    } 
            }
          });
        });   
      });

but if your ajax date is already the url you want, it can be done as follows, however the date should already be formatted to url:

$( document ).ready(function() {
        $('#notifications').click(function(){
          $.ajax({
            url: '<?=base_url("notificacoes")?>',
            type: 'POST',
            data: {
              key: 'olá'
            },
            success: function(data) {
              window.location.href = data;
              //caso precise concatenar pode fazer assim
              window.location.href = "http://..."+data;
            }
          });
        });   
      });