The axios POST request successfully returns a status code of 200, but unfortunately, the database

https://i.sstatic.net/FYO7k.png

I have encountered an issue with my code where I am able to receive a response with status 200, however, the database is not updating. The backend has indicated that it received null data.

          axios.post('api/nosql/LineController/insertLine',  {
            line:{
              id:this.id,
              directional:this.directional,
              kilometer:this.slide1.distance,
              runtime:runtime,
              interval:this.slide2.shift,
              type:this.type,
            },
            stationList: this.newPlatforms,
            
          })

I attempted another approach with the following code, but the problem persisted.

        axios({
          method:"post",
          changeOrigin:"true",
          url:"api/nosql/LineController/insertLine",
          transformRequest:[
            function(data){
              return QS.stringify(data);
            }
          ],
          data: {
            line:{
              id:this.id,
              directional:this.directional,
              kilometer:this.slide1.distance,
              runtime:runtime,
              interval:this.slide2.shift,
              type:this.type,
            },
            stationList: this.newPlatforms,
          }
        })

The backend code snippet is as follows:

public Object insertLine(HttpServletRequest request) throws IOException {
        StringBuffer lineInfoAndStations = new StringBuffer();
        String line;
        BufferedReader reader;

        reader = request.getReader();
        while(null != (line = reader.readLine())) {
            lineInfoAndStations.append(line);
        }

        return service.addLine(lineInfoAndStations.toString());
    }

Answer №1

When utilizing content-type as application/json, remember to exclude the transformRequest attribute. If you are using application/x-www-form-urlencoded, note that it is not possible to post an array or object to the backend.

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

Tips for intentionally refreshing or crashing a browser tab by utilizing the response from an AJAX request

Yesterday, we deployed new code to our production environment which included a polling mechanism using setInterval() in Javascript. This feature makes an AJAX request every 15 seconds to update clients with the server. Surprisingly, even though only around ...

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

The reactivity of VUE3's data is limited

I am encountering an issue with a basic HTML element that has an @click event attached to it. When I click on the a tag, the value does not update in the VUE console. However, when I check the Google Chrome Inspect Element Console, the idClient value is di ...

How to display a variety of JSON data in different templates with unique variables using angularjs

I am curious about the best approach to handling a response that contains various types of objects presented like this: [ {"nodeClass":"Entity", "text":"foo","entityfield":"booz"}, {"nodeClass":"User","username":"bar","userfield":"baz"} ] Each type of ob ...

What is the best way to invoke the update() and ScrollTop() methods in Angular for ngx-perfect-scrollbar?

Currently, I am utilizing the "ngx-perfect-scrollbar": "^5.3.5" library in my project. I have implemented a feature to toggle between "See More" and "See Less", however, when these actions are triggered, the Perfect Scrollbar does not update itself prope ...

Exploring the beauty of ASCII art on a webpage

Having trouble displaying ASCII art on my website using a JavaScript function, the output is not as expected... This is how it should appear: https://i.sstatic.net/MCwPb.png And here is the code I am trying to implement for this purpose: function log ...

AJAX successfully completes, but no response is received

I've been struggling to get the success function in my AJAX call to trigger. I know everything is set up correctly because when I make a request to my API, I can see that it's hitting the URL and the server is responding with an HTTP 200 status. ...

Having trouble with Console.log not working in AJAX and React?

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import Profile from './Github/Profile.jsx'; class App extends Component{ constructor(props){ super(props); this.state = { ...

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

I have a drop down (combo box) in my application that is populated with values from a JSON array object. Can someone please explain how to retrieve the selected value from the drop down in an AngularJS controller? Appreciate the help. ...

What is the best approach for retrieving and storing data in Vuex when working with multiple components containing input fields in Vue Router?

In the Vue CLI project I'm working on, there's a route called Settings which has 3 child components: SettingsA, SettingsB, and SettingsC. Each of these child components consists of approximately 15 input fields, making it impractical to include a ...

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

Tips for incorporating external JavaScript code into React components

I have been tasked with integrating a graphical widget into a React component for a project I am working on. The widget_api code provided by RIPE Stat is required to accomplish this. Previously, in HTML5, the integration was successful using the following ...

Is the vertex count of a Geometry in Three.js increased when it is converted to a BufferGeometry?

Recently, I've been experimenting with the fromGeometry method to convert regular Geometry objects into BufferGeometry objects. To my surprise, I noticed that the number of vertices increases during this conversion process. For instance, consider the ...

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

The ES6 approach: iterator.throw(err) is often explained as inserting an exception as if it happened at the yield statement within the generator. The challenge lies in the fact that the stack trace of this exception does not include any information about t ...

Ways to retrieve several parameters from a controller using Ajax Jquery in Codeigniter

I need to retrieve a list of images from a folder based on a specific ID. Currently, I am able to get the file names but I also require the upload path. Is there a way to obtain both sets of data using a single function? Javascript Code: listFilesOnServ ...

Implementing database queries using an API in Nuxt/Vue: A step-by-step guide

Recently, I delved into Vue/Nuxt and started playing around with API integration. My goal is to transfer the logic from my NuxtServerInit function to an API. nuxtServerInit(vuexContext, context) { return context.app.$axios .$get(process.env.baseUrl ...

Interactively retrieving objects from a JavaScript array based on their keys

let arr = [{id:'one',val:1},{id:'two',val:2}] for( let ii of arr ) { if( ii.hasOwnProperty('id') ) arr[ii.id] = ii } This code snippet allows for accessing the elements in the array by their 'id' key. For exampl ...

What could be causing the CORS error I'm encountering with my XmlHttpRequest?

After re-installing Python to resolve some environment issues, I started encountering a CORS error during an XMLHttpRequest: The CORS policy is blocking access to 'localhost:8000/admin/login/?next=/api/report_builder/api/fields' (redirected fro ...

Real-time updates with Pusher not syncing correctly in Laravel Echo, Vue.js, and Laravel chat application

Recently, I've been diving into a fascinating tutorial on how to construct a real-time chat application using Laravel, Vue js, Laravel Echo, and Pusher js. After diligently setting my BROADCAST_DRIVER=pusher in the env file and configuring the pusher ...