2

I am creating an API by using spring boot. In this project, I used spring web, JPA, jstl and MySql as dependencies of the API. In this project, I have created a Controller, Model and Repository. Basically, this API does CRUD operations. And also I created a client that consumes my own API. When I use Postman to POST data, it successfully insert data to the database and gives me 200 OK code. Then I created web page and created a html form and used Ajax to get that data. But the thing is when I click insert button in the form, it gives me this error.

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Tue May 01 05:16:48 IST 2018 There was an unexpected error (type=Method Not Allowed, status=405). Request method 'POST' not supported

How can I fix this ??

My controller:

package com.kisalka.pacrestapi.controller;

import java.util.List;

import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import com.kisalka.pacrestapi.repository.ImRepository;
import com.kisalka.pacrestapi.model.ImModel;

@RestController
@RequestMapping("/api")
public class ImController {

    @Autowired
    private ImRepository TaskRepository;


    @RequestMapping(method=RequestMethod.POST, value="/tasks")
    public ImModel createNote(@RequestBody ImModel note) {
        return TaskRepository.save(note);
    }

}

My web page:

<form class="form-horizontal" method="POST" action="">

                    <div class="form-group">
                        <label class="control-label col-md-3">Project Name</label>
                        <div class="col-md-7">
                            <input type="text" class="form-control" name="pname" id="txtPname"/>
                        </div>              
                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-3">Developer Name</label>
                        <div class="col-md-7">
                            <input type="text" class="form-control" name="devname" id="txtDevname"/>
                        </div>              
                    </div>

                    <div class="form-group">
                        <input type="submit" class="btn btn-primary" value="Save" id="btnRegister"/>
                    </div>

                </form>

jQuery and Ajax part:

<script type="text/javascript">
        $(document).ready(function () {

            // Save the new user details
            $('#btnRegister').click(function () {
                $.ajax({
                    url: '/api/tasks',
                    method: 'POST',
                    data: {
                        pname: $('#txtPname').val(),
                        devname: $('#txtDevname').val()
                    },
                    success: function () {
                        alert("Inserted"); 
                    },
                    error: function (jqXHR) {
                        $('#divErrorText').text(jqXHR.responseText);
                        $('#divError').show('fade');
                    }
                });
            });
        });
    </script>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Amithash
  • 269
  • 2
  • 4
  • 22
  • Why do you have both a form with a submit button and an ajax request? Odds are the form is being submitted first, which means that the request is being send to "", which would explain why you're getting a `405: Request method 'POST' not supported` – TwiN May 01 '18 at 00:17

1 Answers1

4

Why do you have both a form with a submit button and an ajax request? Odds are the form is being submitted first, which means that the request is being send to "", which would explain why you're getting a 405: Request method 'POST' not supported

Try replacing

<form class="form-horizontal" method="POST" action="">

for

<form class="form-horizontal" method="POST" action="/api/tasks">
TwiN
  • 3,554
  • 1
  • 20
  • 31
  • I tried like this and now I get this error - There was an unexpected error (type=Unsupported Media Type, status=415). Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported.. How can I Fix this ?? – Amithash May 01 '18 at 00:34
  • 1
    @Amithash remove `@RequestBody` from in front of `ImModel note`. – TwiN May 01 '18 at 01:06
  • It works perfectly !! :D Thank You.. If you can, please help with this also - https://stackoverflow.com/questions/50096376/how-to-use-mysql-database-queries-in-spring-boot – Amithash May 01 '18 at 01:12
  • Now I can insert data using form. But, when I use Postman, nothing insert into the database. How can I Fix this ?? – Amithash May 01 '18 at 01:29
  • You need to make sure that you have a header row with the key `Content-Type` and the value `application/x-www-form-urlencoded` in Postman – TwiN May 01 '18 at 01:32
  • Can't I use [{"key":"Content-Type","value":"application/json","description":""}] as previous ?? – Amithash May 01 '18 at 01:34
  • The initial question has already been solved, you should make a different question for that. – TwiN May 01 '18 at 01:37
  • Can I solve this error, without removing @RequestBody ?? When I remove this, I can't use Postman. And also I asked a quiz and no one knows about it.. – Amithash May 01 '18 at 02:37