Now, we want to use the browsable API to compose and send an HTTP PUT request to our RESTful Web Service to replace an existing toy with a new one. First, go to the URL for an existing toy resource, such as http://localhost:8000/toys/7. Make sure you replace 7 with the id or primary key of an existing toy in the previously rendered Toy List. The HTML web page that displays the results of an HTTP GET request to /toys/7 plus additional details and controls will be rendered.
At the bottom of the rendered web page, the browsable API displays the controls to compose and send a POST request to /toys/ followed by the controls to compose and send a PUT request to /toys/7. The controls for the PUT request are the same that we already analyzed for the POST request. The PUT button will use the selected media type and the entered content to compose and send an HTTP PUT request with the appropriate header key/value pairs and content.
The following screenshot shows the controls to compose and send an HTTP PUT request at the bottom of the rendered web page:
Select application/json in the Media type dropdown and enter the following JSON content in the Content text area. Remember that the HTTP PUT method replaces an existing resource with a new one, and therefore, we must specify the values for all the fields and not just for the fields that we want to update:
{ "name": "Surfer girl", "description": "Surfer girl doll (includes pink surfboard)", "toy_category":"Dolls", "was_included_in_home": "false", "release_date": "2017-10-29T12:11:25.090335Z" }
Click or tap PUT. The browsable API will compose and send an HTTP PUT request to /toys/7 with the previously specified data as a JSON body and we will see the results of the call in the web browser. The following screenshot shows a web browser displaying the HTTP status code 200 OK in the response, and the controls to allow us to send a new PUT request, if necessary: