Beginner Beginner - 4 months ago 10
jQuery Question

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>

Answer

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),
Comments