CODEWITHSUNDEEP
jqueryjsonajaxrestspring-mvc
curious_soul
curious_soul

Reputation: 645

Ajax POST request does not work

I have read lot of answers to this question in this forum and others and code looks ok but problem still persists. When I do POST request,I get 400 error code(bad request). But When I call same resource from POSTMAN client, I get response back successfully. Can anyone please look into my code and see what am I doing wrong.

public class Country{

    int id;
    String countryName; 

    @JsonCreator
    public Country(@JsonProperty("id")int id, @JsonProperty("countryName")String countryName) {
        this.id = id;
        this.countryName = countryName;
    }
    ....setter/getters
    }

REST Controller File

 @RestController
    public class CountryController {
        static List<Country> listOfCountries = new ArrayList<Country>();
        static{
            createCountryList();
        }
        @RequestMapping(value = "/countries", method = RequestMethod.GET,headers="Accept=application/json")
        public List<Country> getCountries()
        {
            return listOfCountries;
        }

        @RequestMapping(value = "/addCountry", method = RequestMethod.POST,headers="Accept=application/json")
        public List<Country> addCountry(@RequestBody Country country)
        {System.out.println("addcountry called"+country);
            listOfCountries.add(country);
            return listOfCountries;
        }

        @RequestMapping(value = "/country/{id}", method = RequestMethod.GET,headers="Accept=application/json")
        public Country getCountryById(@PathVariable int id)
        {

            for (Country country: listOfCountries) {
                if(country.getId()==id)
                    return country;
            }

            return null;
        }

    // Utiliy method to create country list.
        public static List<Country> createCountryList()
        {
            Country indiaCountry=new Country(1, "India");
            Country chinaCountry=new Country(4, "China");
            Country nepalCountry=new Country(3, "Nepal");
            Country bhutanCountry=new Country(2, "Bhutan");

            listOfCountries.add(indiaCountry);
            listOfCountries.add(chinaCountry);
            listOfCountries.add(nepalCountry);
            listOfCountries.add(bhutanCountry);
            return listOfCountries;
        }
    }

JS File Content

 $(function() {
        var $ords = $('#orders');
        var $cid = $('#cid');
        var $name = $('#name');

        function displayOrder(country){
            $ords.append('<li>Id :' + country.id + ',name : '+ country.countryName + '</li>');
        }
        $.ajax({
                    type : 'GET',
                    url : 'http://localhost:8080/SpringRestfulWebServicesWithJSONExample/countries',

                    success : function(data) {
                        // data = JSON.parse(data);
                        $.each(data, function(i, country) {
                            displayOrder(country);
                        });
                    },
                    error : function() {
                        alert("error loading data");
                    }
                });
        $("#add").on("click", function(){
            var country= {
                    id:$cid.val(),
                    countryName:$name.val()
            };
            $.ajax({
                type : 'POST',
                url : 'http://localhost:8080/SpringRestfulWebServicesWithJSONExample/addCountry',
                data:country,
                contentType: "application/json",
                success : function(newData) {
                    // data = JSON.parse(data);
                    $.each(newData, function(i, country) {
                        displayOrder(country);
                    });
                },
                error : function() {
                    alert("error loading data");
                }
            });
        });
    });

HTML Page relevant section

<body>
    <h2>Country Names</h2>
    <ul id="orders">
    </ul>
    <p>Id: <input type="text" id="cid"></p>
    <p>Name: <input type="text" id="name"></p>
    <button id="add">Add</button>
</body>

Upvotes: 2

Views: 622

Answers (2)

charlietfl
charlietfl

Reputation: 171669

you aren't sending JSON. Setting contentType does not automatically convert data to json you need to serialize it yourself

Change:

data:country,

To

data:JSON.stringify(country),

Upvotes: 1

Dieter Donnert
Dieter Donnert

Reputation: 302

This bit of your code looks wrong to me.

var country = {
                id:$cid.val(),
                countryName:$name.val()
              };

I would write it something like this:

var id = $cid.val(),
    countryName = $name.val();

var country = {
    "id":id,
    "countryName":countryName
}

The use of the double quotes around id and countryName are important in a post request.

Upvotes: 0

Related Questions