Ajax POST Anfrage funktioniert nicht

Ich habe viele Antworten auf diese Frage in diesem Forum und andere gelesen und Code sieht in Ordnung, aber das Problem besteht immer noch. Wenn ich eine POST-Anfrage mache, erhalte ich 400 Fehlercode (schlechte Anfrage). Aber wenn ich dieselbe Ressource vom POSTMAN-Client aus anrufe, bekomme ich die Antwort erfolgreich zurück. Kann mir bitte jemand in meinen Code schauen und schauen was ich falsch mache.Ajax POST Anfrage funktioniert nicht

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

@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 Datei-Inhalt

$(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 Seite, die relevant Abschnitt mir

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

Quelle

2016-07-16 Surinder

Wenn Seite, die Sie auf anderen Port ist müssen CORS in Server implementieren. in der Browser-Dev-Tools-Konsole sehen würde CORS Fehler – charlietfl

Nein, Seite läuft auf 8080 und Service-Controller läuft auch auf dem gleichen Port. – Surinder

Untersuchen Sie die tatsächliche Anfrage im Browser-Entwicklungswerkzeugenetzwerk, um genau zu sehen, was gesendet wird. – charlietfl

Sie senden JSON nicht. content Einstellung nicht automatisch Daten konvertieren JSon Sie es selbst

ändern serialisiert müssen:

data:country,

data:JSON.stringify(country),

Quelle

2016-07-17 12:36:32 charlietfl

Wow, das war schnell. Vielen Dank. Es hat funktioniert! – Surinder

Dieses Bit des Codes sieht falsche Datei.

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

Ich würde es so etwas schreiben:

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

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

Die Verwendung der Anführungszeichen um id und countryName in einer Post-Anforderung wichtig sind.

Quelle

2016-07-17 03:19:01

Zitate sind in Objektschlüsseln nicht wichtig, es sei denn, Sonderzeichen werden im Namen verwendet. Das Erstellen von Variablen zuerst für Werte hat ebenfalls keine Auswirkungen. Das Objekt selbst wird vor dem Senden serialisiert – charlietfl

Danke für die Antwort. Dieser Code stammt aus dem codeAcademy-Lernprogramm. Wie auch immer, ich habe Änderungen vorgenommen, die Sie vorgeschlagen haben, aber es zeigt immer noch denselben Fehler. Ressource konnte nicht geladen werden: Der Server reagierte mit einem Status von 400 (Bad Request. – Surinder

Ajax POST Anfrage funktioniert nicht

Antwort

Verwandte Themen