Using JavaScript to extract data from an HTML form, then sending it to a servlet and converting it to JSON format

I am facing an issue while trying to pass a JSON object from a JavaScript file to a servlet. I am getting a null value when trying to retrieve the data in the servlet. Please suggest how to resolve this problem as I am unable to extract data from the JSON object.

JSON Object:

var Record ={  
   Username:document.getElementById("username").value,
   Name:document.getElementById("name").value,
   Contact:document.getElementById("phone").value,
   Email:document.getElementById("Email").value,
   DOB:document.getElementById("date").value,
   Team:team,
   Position:Position,
   PermanentAddress:document.getElementById("per_add").value,
   PermanentCountry:document.getElementById("country").value,
   permanentState:document.getElementById("state").value,
   permanentCity:document.getElementById("city").value,
   CurrentAddress:document.getElementById("CurrentAddress").value,
   CurrentCountry:document.getElementById("currentCountry").value,
   CurrentState:document.getElementById("currentState").value,
   CurrentCity:document.getElementById("currentCity").value
}

Data being sent:

var PlayerData = JSON.stringify(Record);

$.post('/FootballLeagueController', PlayerData)

In servlet:

 Gson gson=new Gson();
 FootballPlayerData playerData=new Gson().fromJson(request.getParameter("PlayerData")
  ,FootballPlayerData.class); //(comment)Note :-FootballPlayerData is my pojo class.

Answer №1

When using request.getParameter(String), you can retrieve the value of a post parameter such as "PlayerData". However, in this scenario, the parameter does not exist because the JSON String is directly placed in the post body. To create a parameter named "PlayerData", follow these steps:

$.post('/FootballLeagueController', {PlayerData: JSON.stringify(Record)})

This code will send a parameter labeled "PlayerData" with the stringified JSON as its value.

For further clarification, please refer to the jquery.post() documentation.

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

Unable to alter the background swing's color

I need some help changing the background color in my simple pong game created with swing. I've been trying to figure it out, but so far no luck. Here's the code I have [background color change is done in the main method] (please excuse any messin ...

Adding elements to an array using push method during a loop where elements are

After experimenting with this code on jsfiddle, I am puzzled as to why it doesn't generate an array of 5 objects, each with a different id property: var arr = ["1", "2", "3", "4", "5"]; var clone = {"id": "0", "name":"Matthew"}; var arrObj = []; var ...

What is the best way to add an Angular 2 component to a D3 selection?

I have implemented a chart using Angular2 and d3js with a tooltip that appears when hovering over the chart. Currently, I am directly appending a "div" element to the body and dynamically generating the innerHTML when the mouse moves within the d3.select(" ...

Utilize the existing Google Maps API instance within a single-page application

Imagine I have a Single Page Application (Angular JS application), and I create a Google Map instance on an element with the id googleMap - var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption) Later on, as I navigate th ...

Why does Angular not reset form after ng-click event?

Something seems off with my form reset after a ng-click event, am I missing something? I can successfully submit the form, but it doesn't automatically reset. Here is the error message I receive: angular.js:12701 POST 500 (Internal Server Error ...

The angular/ionic ng-click event is failing to refresh the view, although it is successfully updating the model

I am encountering difficulties updating a view in Ionic/Angular using ng-click. Prior to this, I faced a similar issue which I resolved by following advice from this source. It explained that if the button is within a <label>, ng-click will not func ...

What is the process for submitting a form from a different webpage?

I am working on a website with two pages. Each page has a header with navigation tabs to move between page 1 and page 2. When a tab is clicked, I want the selected page to re-POST to the server for a quick refresh before displaying. There is a form on e ...

<select> Choices are updated without the need for AJAX

Question I am working on a project with two dropdown select inputs. The first one is for selecting the country and the second one is for choosing a more specific location within that country. For example, if you choose "United Kingdom" as the country, you ...

PHP not able to retrieve JavaScript variable using Ajax

Resolved: I recently discovered that ajax only sends data in that particular moment, and redirecting creates a new instance. I spent hours searching through various Stack Overflow results for solutions, but none of them seem to work. My current challenge ...

Deactivate Bootstrap Button Pills and Activate Change with an Alternate Button

Seeking a solution for my multi-step form utilizing Bootstrap nav-pills. Currently, users can navigate through the steps without completing the required form fields first. I am looking to disable this feature and trigger content changes with a different bu ...

When deployed, Webpack 2.2.0.rc-0 will condense and optimize vendor.js and manifest.js, but will not perform the same action on bundle

I have been troubleshooting why my vendor and manifest files are minified and uglified, but my bundle is not. I am wondering if it could be related to the order of the plugins or perhaps something to do with the CommonsChunkPlugin? Here is the code for my ...

Having trouble displaying a set of data points in a React component

Exploring React, I have built a test app and performed an API call to fetch a large JSON object. After breaking it down into 10 arrays with 3 props each, I am now facing a challenge in sending this data to another component. Despite being able to log the ...

Issues with AngularJS routes not functioning correctly without any errors

Viewing File Structure <-- see attached image I am currently working on developing an AngularJS web application with ASP.NET MVC 4. Despite setting up my routes properly, I am encountering an issue where my partial view is not being injected even thoug ...

Encountering errors unexpectedly when utilizing custom row layouts

Currently, I am delving into the world of Android development and juggling multiple projects. One particular project involves a list view where clicking on a row passes both the name of the row and a value from a database to my next activity seamlessly. T ...

When it comes to creating APIs in NodeJS for a web application, where is it more effective to verify JSON parameters - on the client side or within the API itself

When developing APIs, do you believe in leaving parameter validation solely to the front end or do you also implement validation within the API itself? Personally, I have been including validation in my APIs, but I am starting to find them becoming overly ...

Unable to generate any output from the link when using 'react-router-dom'

Having trouble integrating a NavBar into my React app.js file. The Route files are loading correctly, but the Links set in the NavBar component aren't showing up on the page. Here is the code for NavBar: import React from 'react'; import { ...

Customizing a tinyMCE button with a unique icon

I'm attempting to insert a Font-Awsome icon into a button that I included in tinyMCE using the following code: ed.addButton('youtube', { title: 'Add Video' , icon: 'icon-youtube', onclick: function () { ...

Integrating Angular 2 with Java functionalities and JSP

Starting my journey with the Angular 2 framework, I recently dove into working with it. As I delved deeper, many questions began to surface. My initial step was creating an Angular project using the Angular CLI, which went smoothly. However, when I attem ...

Determine the file format using fs module in Node.js

I have a question about extracting file types or extensions from a folder. I have multiple files in a folder, and I want to retrieve the type/extension of the file that matches a randomly generated number stored in my num variable. Is there a way to achiev ...

"Modifying state within a child component and utilizing the refreshed value in the parent component

I'm currently working on creating a simple header mini cart with a cart item counter in NextJS. I'm utilizing the form state value in the header component and then passing that value to the child components of the header where the numerical quant ...