Encountering a 404 Error When Making an Ajax Request in Spring MVC

Looking to implement a basic login form using Spring MVC and an APIResponseModel class with Status, Message, HTTPStatus variables. After submitting the credentials, receiving a 404 ajax response, although the Controller returns {"status":"200","message":"Login Success!!","data":Admin}. Need assistance in resolving this issue.

Spring Controller

@RequestMapping("/login")
    public APIResponseModel getLoginPage(@ModelAttribute("loginUser")UserDTO userDto, HttpSession session) {
        // Code block
    }

Validate login JS Function

function processLogin(e){
    // Code block for processing login
}

MasterAjax class

class MasterAjax{
    constructor(){
        // Constructor code
    }
    
    requestData(callBack){
        // Method to request data
    }
    
}

LoginForm

<form class="page" name="loginForm">
 <input class="email" id="email" path="email"  type='text' align="center" placeholder="Username / Email" />
  <input class="pass" id="password" path="password" type='password' align="center" placeholder="Password" />
  <button class="submit" onclick="processLogin(event)">Sign in</button>
  <p class="forgot" align="center"><a href="#">Forgot Password?</a></p>
</form>

Answer №1

The controller missed including @ResponseBody, causing the response not to be sent when called.

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

Issue with bootstrap: the ID is not activating even when it is visible

I am a beginner with bootstrap and I encountered an issue. I created a simple page using bootstrap 5 and included 4 buttons: "Home," "Explore," "Create," and "Share." Here is the code for reference: https://github.com/nguyencuc2586/project2 In the code s ...

Tips on altering a predetermined input text value using JavaScript

I have a question about using JavaScript. I am currently developing a tax calculation system. function calculateTax(){ var invoiceValue = document.getElementById("invoicevalue"); var ppn = document.getElementById("ppn"); var pph = document.get ...

What are the steps to implementing React in this particular situation?

In my Django application, there is a view that presents booking data for all theaters on a specific date. Once the data is loaded, an authorized user can carry out tasks such as assigning coordinators or changing timings using ajax (jquery) and updating ...

Customize the appearance of radio buttons in HTML by removing the bullets

Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...

React.js - state variable becomes undefined upon uploading app to Amplify

I am encountering a perplexing error and am struggling to determine the root cause. To provide a brief overview, I have a dialog containing a jsonschema form along with an image that is uploaded to an input and saved in b64 format within a state variable c ...

I'm working on updating a field within a Firestore document using ReactJS

I am encountering an issue while attempting to update a field within a document in Firestore using ReactJS. Interestingly, others have successfully done it without any errors. app.js const app = initializeApp(firebaseConfig); const auth = getAuth(app); co ...

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

Combine various arrays of objects into one consolidated object

Problem: There are untyped objects returned with over 100 different possible keys. I aim to restructure all error objects, regardless of type, into a singular object. const data = [ { "type":"cat", "errors" ...

Accessing elements from a controller in a nested ng-repeat in AngularJS

I am relatively new to the world of AngularJS and I've encountered a challenge that I can't seem to figure out. The issue lies within my nested ng-repeat view, as I have a nested comment system. Therefore, the view is built from an object structu ...

Unable to access the store from the Redux library within a React application

I decided to test out the Redux example from the official React-Redux website, which can be found HERE, using the following JavaScript code: // index.js import React from 'react' import ReactDOM from 'react-dom' import TodoApp from &ap ...

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted. The current error code I am encountering is: I initially suspe ...

Avoid unnecessary renders by only updating state if it has changed from the previous state

Is there a specific React lifecycle method that can trigger a re-render only when the updated state differs from the previous state? For instance, consider the code snippet below: class App extends Component { constructor() { super(); this.state ...

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

Below is the typescript file in question: module someModule { declare var servicePort: string; export class someClass{ constructor(){ servicePort = servicePort || ""; //ERROR= 'ReferenceError: servicePort is not defined' } I also attempted t ...

What is the best way to display an Alert using ajaxSubmit?

I am working on implementing an Alert message using ajaxSubmit similar to the code example below: submitHandler: function( form ){ var dados = $( form ).serialize(); $.ajaxSubmit({ type: "POST", ...

Combining multiple API requests using NodeJS

I'm currently experimenting with SteamAPI to enhance my understanding of NodeJS. My aim is to retrieve game information after making an initial request to obtain the player's profile and storing the game IDs in an array. However, I am facing a ch ...

Establish the starting time for the timer and use the setInterval() function according to the seconds stored within the object

How can I configure the values of timerOn, timerTime, and timerStart to make the watch start counting from 120 seconds? Currently, the clock starts counting from 3 minutes and 22 seconds, but it should start from 2 minutes. You can find all the code here: ...

Vue component fails to react to updates from Vuex

Currently, I am developing a system to facilitate the management of orders at a shipping station. Although I have successfully implemented the initial changes and most of the functionality, I am encountering an issue where one component fails to update ano ...

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

Update the var value based on the specific image being switched using jQuery

I have implemented a jQuery function that successfully swaps images when clicked. However, I am now looking to enhance this functionality by passing a parameter using $.get depending on the image being displayed. Here is the scenario: I have multiple comm ...