Ajax POST请求不起作用

时间:2016-07-16 20:30:25

标签: jquery json ajax rest spring-mvc

我在这个论坛上已经阅读了很多关于这个问题的答案,其他人和代码看起来还不错,但问题仍然存在。当我发出POST请求时,我收到400错误代码(错误请求)。但是当我从POSTMAN客户端调用相同的资源时,我得到了成功的响应。任何人都可以查看我的代码,看看我做错了什么。

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控制器文件

 @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文件内容

 $(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页面相关部分

<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>

2 个答案:

答案 0 :(得分:1)

你没有发送JSON。设置contentType不会自动将数据转换为json,您需要自己将其序列化

变化:

data:country,

data:JSON.stringify(country),

答案 1 :(得分:0)

我的代码中的这一部分看起来不对。

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

我会这样写:

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

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

idcountryName周围使用双引号对于帖子请求非常重要。

相关问题