Simple redirect with Ajax

1

I'm learning JQUERY and I want to do a simple redirect in Ajax when you click on a but for some reason it does not redirect me.

$("#btn-proceed-chk").click(function(){

    var chkurl = "URL-DE-REDIRECCIONAMIENTO";

    $.ajax({
        async: true,
        type: "POST",
        url: chkurl,
        success: function(data){
             window.location.href = 'url-de-redireccionamiento'
        }
    })})
    
asked by Andres Matias 11.09.2018 в 22:33
source

1 answer

2

First you must be clear that this would be a basic structure to exercise in your JavaScript document a call of any type of method (POST, GET, ..), and here a brief example of how you could do it with an event of JavaScript:

AJAX

jQuery(document).on('submit','#nombre_formulario', function(event)
{
  event.preventDefault();
  jQuery.ajax({
    url: 'nombre_mi_url.php',
    type: 'POST',
        dataType: 'json',
    data: $(this).serialize(),
    beforeSend: function()
    {
      $('.btn').val('Validando...');
    }
  })
  .done(function(respuesta)
  {
   console.log("Respuesta del servidor: ", respuesta);
  })
  .fail(function(answer)
  {
    console.log(answer.responseText);
  })
  .always(function()
  {
    console.log("completado");
  })
});
  

Note: It is recommended that you make use of the scripts in directions outside of your HTML root document, due to better programming practices.

<script type="text/javascript" src="js/mi_script.js"></script>

Second, if your error persists since the return of your server, it throws the following to what you mention in one of your comments:

  

Failed to load website.com/un%20pedido: Redirect from   'website.com/un%20pedido'; to 'website.com/un%20pedido'; has been   blocked by CORS policy: No 'Access-Control-Allow-Origin' header is   present on the requested resource. Origin 'website.com'; is therefore   not allowed access.

Explanation

the data that comes via AJAX must belong to the same domain. In the event that this is not the case, the application will not be able to load the data due to security limitations. The problems begin when we have applications that need access to that data but are not under the same domain. A very common example is a Mobile application packaged with PhoneGAP or in Ionic with Angular. So when you upload your app to a server it will respond correctly, it is only a limitation when you are working locally (this as an example in an environment similar to the one mentioned)

Solution

You can download an add-on for the browser either Chrome (it's easier) or another one of your preference. Look for it by that name CORS and it will help you, you just have to link the web address to which you make your request with ajax. And in this way you allow the connection between both parties.

Another possibility is that the document or file to which you point is coded to avoid security problems, and in this way can not be used from an external application (A domain X to a domain Y).

So, what you would do is use this type of headers so that you can receive the request correctly (If in your case you have access to such a file and of course, that is the backend in PHP):

<?php 
  //Permisos CORS

  //* es un comodin para desplegar la información a cualquier servidor que realice la peticion.
  header("Access-Control-Allow-Origin: *"); 

  //Debemos dar permisos de acuerdo a la llamada o metodo que necesites GET,POST,UPDATE.
  header('Access-Control-Allow-Methods', 'GET, POST');

  //Para formatos JSON se debe asignar el encabezado correspondiente.
  header("Content-Type: application/json");

 ?>
    
answered by 11.09.2018 / 23:52
source