Sending a request to the controller via AJAX in order to transfer data from a JSP webpage

Question

Sending a request to the controller via AJAX in order to transfer data from a JSP webpage

I'm new to Spring MVC and encountered an error while trying to pass data to a controller using Ajax. Please review the code below and provide any potential solutions.

 <form class="form-horizontal bucket-form" id="myform" method="post" >
            <div class="control-label text-center">
               <p class="required"><em>required fields</em></p></div>

                <div class="form-group">    
                    <label class="col-sm-3 control-label required">First Name</label>
                    <div class="col-sm-6">
                        <input type="text" name="firstname" id="firstname" class="form-control">
                    </div>
                </div>
                 // Other input fields...

                <div class="form-group">
                    <div class="col-lg-offset-3 col-lg-6">
                        <button class="btn btn-primary" id="speakerSubmit" type="submit">Save</button>
                     // Script for form reset...
                    </div>
                </div>

            </form>
        </div>
    </section>      
    </section>

    <div class="footer">
           <div class="row">
                <div style="float:left" class="col-md-6"><p 
  style="padding:15px">Â© 2017.All rights reserved | Powered by <a 
  href="www.techmahindra.com"> TechMahindra </a></div> </p>
                      // Social media icons...
            </div>
    </div>

 </section>
 <script src="js/jquery2.0.3.min.js"></script>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
 // Other script files...

<script>
$( document ).ready(function() {
// AJAX request function...
 });
 </script>

Speaker Class

// Speaker class definition...

    }

SpeakerController

Description of Speaker Controller...

 // Speaker controller with annotation mappings...

SpeakerserviceImpl

 // Service implementation for adding a speaker...

SpeakerdaoImpl

 // Implementation of DAO layer for handling speakers in the database...

Error Result

The Request sent by client is syntactically incorrect status-400

javascript java ajax jsp spring-mvc

Answer 1

Answer №1

Controller

@PostMapping("EMS_APP/spkr")
public ResponseEntity addSpeaker(@RequestBody SpeakerAddRequest request) {
    Speaker speaker = new Speaker();
    speaker.setFirstName(request.getFirstName());
    ...
}

A breakdown of the code

The annotation @PostMapping is shorthand for
```
@RequestMapping(method = RequestMethod.POST)
```
.
The specific mapping to URL and HTTP method is defined by @PostMapping("EMS_APP/spkr"), equivalent to
```
@RequestMapping(value = "EMS_APP/spkr", method = RequestMethod.POST)
```
.
@RequestBody plays a role in mapping the payload of a POST request to a Plain Old Java Object (POJO) like SpeakerAddRequest.

An example of correct usage, @RequestParam handles parameters in the URL rather than request body.

// For a GET request with URL ../EMS_APP/spkr?name=foo

@GetMapping("EMS_APP/spkr")
public ResponseEntity<Speaker> getSpeakerByName(@RequestParam("name") String speakerName) {
    // speakerName== "foo"
}

Data transfer object (DTO)

public class SpeakerAddRequest {

    @JsonProperty("firstname")
    private String firstName;
    ...

    public String getFirstName() {
        return firstName;
    }
}

Understanding the DTO

This section illustrates how the properties from the POST payload are mapped to the corresponding attributes in the POJO. With "firstname": "John", private String firstName is assigned as the key matches the one specified in @JsonProperty.

Form Handling

Enhance your ajax functionality

$.ajax({
    ...
});

by utilizing

$.post("EMS_APP/spkr", $("#myform").serialize());

The essence of form handling

Rather than tediously mapping all form elements yourself, this technique automatically structures the form data into a suitable format for submission via POST request to the designated endpoint.

Answer 2

Controller

@PostMapping("EMS_APP/spkr")
public ResponseEntity addSpeaker(@RequestBody SpeakerAddRequest request) {
    Speaker speaker = new Speaker();
    speaker.setFirstName(request.getFirstName());
    ...
}

A breakdown of the code

The annotation @PostMapping is shorthand for
```
@RequestMapping(method = RequestMethod.POST)
```
.
The specific mapping to URL and HTTP method is defined by @PostMapping("EMS_APP/spkr"), equivalent to
```
@RequestMapping(value = "EMS_APP/spkr", method = RequestMethod.POST)
```
.
@RequestBody plays a role in mapping the payload of a POST request to a Plain Old Java Object (POJO) like SpeakerAddRequest.

An example of correct usage, @RequestParam handles parameters in the URL rather than request body.

// For a GET request with URL ../EMS_APP/spkr?name=foo

@GetMapping("EMS_APP/spkr")
public ResponseEntity<Speaker> getSpeakerByName(@RequestParam("name") String speakerName) {
    // speakerName== "foo"
}

Data transfer object (DTO)

public class SpeakerAddRequest {

    @JsonProperty("firstname")
    private String firstName;
    ...

    public String getFirstName() {
        return firstName;
    }
}

Understanding the DTO

This section illustrates how the properties from the POST payload are mapped to the corresponding attributes in the POJO. With "firstname": "John", private String firstName is assigned as the key matches the one specified in @JsonProperty.

Form Handling

Enhance your ajax functionality

$.ajax({
    ...
});

by utilizing

$.post("EMS_APP/spkr", $("#myform").serialize());

The essence of form handling

Rather than tediously mapping all form elements yourself, this technique automatically structures the form data into a suitable format for submission via POST request to the designated endpoint.

Sending a request to the controller via AJAX in order to transfer data from a JSP webpage

Answer №1

Controller

A breakdown of the code

Data transfer object (DTO)

Understanding the DTO

Form Handling

The essence of form handling

Similar questions

The Material UI library is signaling that there is an unidentified property called `selectable` being used with the <table> tag

The issue arises when Gradle fails to resolve a placeholder from the parent properties for a dependency version within a specified library in the build.gradle file

Update the parameter value in a URL using JavaScript

Presenting a ui-router modal while maintaining the parent state's refresh-free appearance

Display a separate component within a primary component upon clicking a button

Clearing all the nested offspring elements within a highly nested one-dimensional array

What is the purpose of using $ symbols within NodeJS?

What are the steps to manually activate input validation in Angular 2?

Should I load the data into an object after it's created, or should I directly get an instantiated object with the data already loaded?

Using AJAX to write a JSON file in PHP

Utilize String to Set Cookies

What is the best way to retrieve a string from a URL?

Adding a button in Node and Mongoose for updating data: A step-by-step guide

Transmit information to the controller using jQuery in a C# MVC environment

Modifying an image's height and width attributes with jQuery and CSS on click action

Ng2-smart-table: Utilizing Angular 2 for Efficient Data Organization with Identically Named Columns

What is the best method for enabling CORS policy when making a fetch request from a Vue.js frontend to

Looping through images using JQuery

Dynamically allocate a controller to an element following the Bootstrap process

How to connect multiple HTTP requests using observables in Angular 7