send array as part of x-www-form-urlencoded using postman

1. Overview

In this tutorial, we will explore ways to send an array as part of x-www-form-urlencoded Using Postman.

The W3C committee has defined several formats that we can use to send data over the network layer. These formats include: form data, raw And x-www-form-urlencoded Information We are sending data using the latter format by default.

2. x-www-form-urlencoded

The format listed describes the form data sent as a block in the HTTP message body. It sends an encoded form data set to be submitted to the server. The encoded data has the format of a key-value pair. The server must support the content type.

Forms submitted using this content type match the following encoding patterns:

  • Control names and values ​​are escaped.
  • The ‘,’ symbol will separate multiple values.
  • The ‘+’ sign will replace all space characters.
  • Reserved characters must comply with RFC 17.38 notation.
  • All non-alphanumeric characters are encoded using percentage encoding.
  • Keys are separated from values ​​with the equal symbol (‘=’), and key-value pairs are separated from each other by an ampersand (‘&’).

In addition, the length of the data is not specified. However, using x-www-form-urlencoded A data type has a data limit. Therefore, the media server will reject requests that exceed the specified size inside the configuration.

In addition, it became disabled when sending binary data or values ​​containing non-alphanumeric characters. Keys and values ​​containing non-alphanumeric characters are percent-encoded (also known as URL encoding), so this type is not suitable for binary data. Therefore, we should consider using form data Instead the content type.

Also we cannot use it for encoding files. It can only encode URL parameters or data inside the request body.

3. Sending an Array

to use x-www-form-urlencoded Type in postman, we need to select the radio button with the same name within the body tab of the request.

As already mentioned, the request consists of key-value pairs. Postman will encode the data before sending it to the server. Additionally, it will encode both the key and the value.

Now, let’s see how to send array in Postman.

3.1. send simple array object

We’ll start by showing how to send a simple array object containing simple object types, for example, string Element

First, let’s make a student Class that will have an array as an instance variable:

class StudentSimple {
   private String firstName;
   private String lastName;
   private String[] courses;
   // getters and setters
}

Second, we’ll define a controller class that will expose the REST endpoint:

@PostMapping(
  path = "/simple", 
  consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
public ResponseEntity<StudentSimple> createStudentSimple(StudentSimple student) {
    return ResponseEntity.ok(student);
}

When we use consume attribute, we need to define x-www-form-urlencoded As a media type that the controller will accept from the client. otherwise, we will get 415 Unsupported Media Type Mistake. In addition, we have to leave @RequestBody since annotation doesn’t support annotation x-www-form-urlencoded content type.

Finally, make a request in Postman. The easiest way is to separate the values ​​using a comma (‘,’):

However, this approach can cause problems if the value only contains a comma. We can solve the problem by setting each value separately. to set elements syllabus array, we need to provide key-value pairs using the same key:

simple array with postman

The order of the elements in an array will follow the order given in the request.

Additionally, square brackets are optional. On the other hand, if we want to add an element at a specific index in the array, we can get it by specifying the index in square brackets:

simple array with index using postman

We can test our application using curl request:

curl -X POST \
  http://localhost:8080/students/simple \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d 'firstName=Jane&lastName=Doe&
        courses[2]=Programming+in+Java&
        courses[1]=Data+Structures&
        courses[0]=Linux+Basics'

3.2. Sending complex array object

Now, let’s take a look at how to send an array containing complex objects.

First, let’s define syllabus The class that would represent a single course would be:

class Course {
    private String name;
    private int hours;
    
    // getters and setters
}

Next, we’ll create a class that will represent a student:

class StudentComplex {
    private String firstName;
    private String lastName;
    private Course[] courses;
    // getters and setters
}

Let’s add a new endpoint inside the controller class:

@PostMapping(
  path = "/complex",
  consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
public ResponseEntity<StudentComplex> createStudentComplex(StudentComplex student) {
    return ResponseEntity.ok(student);
}

Finally, make a request in Postman. Also in the previous example, to add elements to the array, we need to provide key-value pairs using the same keys:

Sending complex array with postman

Here, square brackets are mandatory along with the index. To set the value for each instance variable, we need to use the dot (‘.’) operator after the name of the variable.

Again, we can test the endpoint using cURL request:

curl -X POST \
  http://localhost:8080/students/complex \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d 'firstName=Jane&lastName=Doe&
        courses[0].name=Programming+in+Java&
        courses[0].hours=40&
        courses[1].name=Data+Structures&
        courses[1].hours=35'

4. conclusion

In this article, we have learned how to set enough content type to avoid server side unsupported media type Mistake. Also, we have explained how to send both simple and complex arrays x-www-form-urlencoded Content Types in Postman.

As always, all code snippets can be found on GitHub.

       

Leave a Comment