How can I redirect to a different URL using Ajax when successful POST request is made?

Here is the code snippet I am working with:

$.ajax({
    type: "POST",
    url: "/pro_signup",
    data: { data: data, key: key },
    dataType: "json",
    success: function (response) {
      document.getElementById("purchase").innerHTML =
        '<button class="btn btn-primary button-connected">Verifying...</button><p class="grey-text">Waiting for verification...</p>';
      window.location.href = "/pro_account";
    },
    error: function (exception) {
      document.getElementById("purchase").innerHTML =
        '<button class="btn btn-primary button-error">Failed</button><p class="grey-text">Verification has failed.</p>';
    },
  });

In my Flask backend, I have a route /pro_account that only accepts POST requests. Therefore, I need to find a way to modify this code so that upon success, it makes a post request to redirect to the /pro_account URL instead of using

window.location.href = "/pro_account";

Any ideas on how I can achieve this redirection in the code above?

Answer №1

Shoutout to @Xupitan for guiding me in the right direction. Ultimately, I implemented this solution:

The resulting code:

$.ajax({
        type: "POST",
        url: "/pro_signup",
        data: { data: data, key: key },
        dataType: "json",
        success: function (response) {
          //console.log(response);
          $("#var1").val(response);
          $("#form").submit();
        },
        error: function (exception) {
          document.getElementById("purchase").innerHTML =
            '<button class="btn btn-primary button-error">Failed</button><p class="grey-text">Verification has failed.</p>';
          //console.log(response);

accompanied by this HTML structure:

<form style="display: none" action="/pro_account" method="POST" id="form">
      <input type="hidden" id="var1" name="var1" value="" />
    </form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Spin an object around the global axis using the tween.js library

I'm trying to achieve a gradual rotation of a cube on the world axis using tween. Initially, I was able to rotate the cube around the world axis without tweening with the following code: rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeT ...

What could be the reason that my JSON request is not functioning properly?

I am currently working on creating a movie search application. This project marks my first time delving into json and I'm facing some issues with my code. As of now, I have it set up and running smoothly on localhost through xampp. On submitting the ...

AngularJS: Organizing Controllers Horizontally Within ngRepeat

My data consists of a table with 100 rows, each representing a complex object that is an instance of a specific type. User interactions trigger operations on these objects individually, with each row having unique operations independent of the others. $sc ...

Troubles arise with loading Ajax due to spaces within the URL

I currently have two python files named gui.py and index.py. The file python.py contains a table with records from a MYSQL database. In gui.py, there is a reference to python.py along with a textfield and button for sending messages. Additionally, the g ...

What does the reportProgress function do in HTTP services with JavaScript?

Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...

Exploring various components within a JavaScript array

I keep a list of names in a file named Ignore.json [ "George", "Carl" ] The filename is ignore.json Within my program, I load the contents of the file into a variable called ignore var ignore; ignore = require("./Ignore.json"); Now, I need to check i ...

Troubleshooting ASP.NET MVC and Ajax json Datatables: encountering errors with json and cells not displaying proper data

I have exhausted all resources on stack exchange and datatables.net forums trying to solve this issue, but I still can't get it to work. My problem lies with the var listOfFiles, which is a list of the model shown below (List<AudioModel>): pub ...

Tips for populating an array with boolean values when a checkbox change event occurs:

I am looking to fill the answers array with boolean values. The checkboxes on my form are generated dynamically, but there will only be four of them. When a checkbox is unchecked, its corresponding value in the answers array should be false; when checked, ...

Encountering a TypeError while attempting to sort in ReactJS: "0 is read only."

Every time I attempt to sort an object before mapping it in reactjs, I encounter the TypeError: 0 is read only. Despite trying to handle cases where props are empty or when the array length is more than 0 before applying the sort function, the error persis ...

Converting HTML Content into Json Data

When trying to update the content area on my website without refreshing the entire page, I encountered difficulties in pulling data from a JSON file. Despite attempts at using AJAX and conducting research on JSON and AJAX techniques, I was unable to succes ...

Conditional radio button disabling in Material-ui

Currently, I am developing a React application using material-ui. My goal is to disable all radio buttons within a RadioGroup when a specific event occurs, and then re-enable them once the event is no longer active. For example, when a button is clicked, ...

Is there a way to dynamically include a peer dependency in a file that is bundled using webpack?

I am currently developing a plugin that relies on jQuery as a peer dependency. However, when I attempt to import this plugin into my primary project (which already has jQuery installed), I encounter the following error: Module not found: Error: Can't ...

How can I locally store 3D models and textures using three.js?

Currently working on a game using three.js, where each game level is on a different page. However, when transitioning from one level to another, the browser reloads the page which can be quite slow. Is there a way to store 3D models locally so they don&apo ...

What is the best way to incorporate a custom string into an Angular application URL without disrupting its regular operation?

In my Angular application with angular ui-router, I am facing an issue with the URL structure. When I access the application from the server, the URL looks like localhost/..../index.html. Once I click on a state, the URL changes to localhost/.../index.htm ...

jQuery: use the "data-target" attribute to toggle the display of a single content area

My code generally works, but there is an issue. When clicking on "Link 1" followed by "Link 2", only the content for Link 2 should be visible. How can I achieve this with my code? $("li").click(function() { $($(this).data("target")).toggle(); // ...

What is the best method for retrieving data through an ajax call in my modular JavaScript setup?

Working with a basic modular JavaScript structure, my goal is to request a random quote from an API and display it on an HTML page using Mustache.js. I previously achieved this without the modular approach, but now I'm attempting it in a more structur ...

Issues arise when trying to integrate external JavaScript files into a Vue application

I am facing an issue with including external JS files in my HTML document. The website requires these files to function properly. What I have attempted: In the main.js file, I tried adding these imports: import '../../assets/js/jquery-3.5.1.min&apos ...

Troubleshooting webpack encore issues with importing enums from node_modules

I am faced with a challenge of utilizing an enum from a library I created in a different project. The library is developed using Vue and typescript, bundled with rollup. On the other hand, the project is built with Symfony, with the front end also using Vu ...

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

Is it problematic to have duplicate template ref values, such as ref="foo", for the same type but different instances of a component across views in a Vue 3 application? Let's consider the following example pseudocode: // ROUTE A <te ...

Troubleshooting: Why is the AngularUI Modal dialog malfunctioning

I'm currently working on integrating an angularUI modular dialog into my application. Here is a snippet from my controller.js file: define([ 'app' ], function(app) { app.controller('TeacherClasses', [ '$scope', &apo ...