Ich möchte JSON-Daten (Objekte) mit Ajax zwischen Java und JavaScript austauschen! ~ Frühlingsausgabe ~

Übergeben Sie JSON-Daten von JS an den Java-Controller

Ich habe den JSON übergeben, als ich eine einfache TODO-App erstellt habe, also ein Memorandum Ich verwende die Ajax-Kommunikation mit jQuery

todo.js

/**Neu zur Datenbank hinzufügen. */
  function postItem(newContent) {

    let todo = {
      content: newContent
    };

    $.ajax({
      type: "post",
      url: contextPath + "/post",  //OK, wenn es sich um die URL handelt, die Controller aufruft
      data: { jsonTodo: JSON.stringify(todo) }, //JSON(Assoziatives Array)Zu einer Zeichenfolge
      dataType: "json"
    }).then(function (result) {
      console.log('Sie können die Verarbeitung zum Zeitpunkt des Erfolgs schreiben. Wie nachstehend.');
      let content = result.content;
    }, function () {
      console.log('Sie können die Verarbeitung zum Zeitpunkt des Fehlers schreiben');
    });

Kimo ist JSON.stringify (konvertiert den Ziel-JSON in einen String)

TodoController.java

	/**
	 *Fügen Sie ein neues TODO hinzu.
	 * @param todo Neuer Beitrag TODO
	 * @Geben Sie TODO mit dem reflektierten Update zurück
	 */
	@ResponseBody //Da der JSON-Encoder in der Anmerkung enthalten ist, kann das Objekt direkt an JS zurückgegeben werden.
	@PostMapping("/post")
	public Todo post(@RequestBody Todo todo) throws JsonParseException, JsonMappingException, IOException  {
        todoRepository.saveAndFlush(todo); //Datenbank-Update
		return todo;
	}

Übergeben von Objekten vom Java-Controller an JS

TodoController.java

    @ResponseBody //Konvertiert das zurückgegebene Objekt automatisch in eine Zeichenfolge, die von JSON interpretiert werden kann
	@GetMapping("/find_all_asc")
	public List<Todo> findAllOrderASC(){
		List<Todo> todos = todoRepository.findAll(new Sort(Direction.ASC, "id"));
		return todos;
	}

todo.js

  /**TODO-Listeninitialisierung*/
  $.getJSON(contextPath + "/find_all_asc", null,
    function (data, textStatus, jqXHR) { //JSON ist in Daten gestaut
　　　 //Sie können den Prozess beschreiben, den Sie mit dem erworbenen JSON ausführen möchten
      data.forEach(todo => {
        console.log(todo.content);  
      });
    }
  );

Ajax-Setup (einschließlich jQuery-Beschreibung)

JavaScript

$(function () {
    /**
     * layout.Kontextpfad von HTML erhalten.
     *Beispiel)/elabel/Wenn Sie auf Bearbeiten zugreifen möchten, klicken Sie auf "contextPath".+ 'elabel/edit'Kann als URL verwendet werden.
     */
    contextPath = $('#contextPath').val();
});

/**Wenn Sie die Einstellung ändern möchten, schreiben Sie sie in die individuelle Ajax-Methode.. */
(function () {
    $.ajaxSetup({
        cache: false,
        /**Speichern Sie die Antwort der einmal verwendeten Ajax-Kommunikation nicht zwischen. */
        timeout: 15000,
        /**Timeout-Einstellung (vorläufig)*/
        beforeSend: function (xhr, settings) {
            /**Verarbeitung kurz vor Kommunikationsbeginn*/
            setCsrfTokenToAjaxHeader();
            // showKurukuru();
        },
        success: function (data, status, xhr) {
            /**Verarbeitung bei erfolgreicher Kommunikation*/
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            /**Verarbeitung, wenn die Kommunikation fehlschlägt*/
            console.log("Ajax-Kommunikation fehlgeschlagen");
            console.log("XMLHttpRequest : " + XMLHttpRequest.status);
            console.log("textStatus     : " + textStatus);
            console.log("errorThrown    : " + errorThrown.message);
        },
        complete: function (xhr, status) {
            /**Verarbeitung nach Abschluss der Kommunikation (unabhängig davon, ob es sich um einen Fehler handelt oder nicht)*/
            //hideKurukuru();
        },
    });
})();

/**
 *Eine Funktion, die ein Token basierend auf den CSRF-Maßnahmen von Spring Security in den Header der Ajax-Kommunikation einbetten kann..
 *Bitte verwenden Sie es, indem Sie es kurz vor der zu verwendenden Ajax-Kommunikation aufrufen..
 */

function setCsrfTokenToAjaxHeader() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function (e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
}

Thymeleaf

<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<input id="contextPath" type="hidden" th:value="${#request.getContextPath()}" />

Referenzartikel

Nifty JSON.stringify (http://www.symmetric.co.jp/blog/archives/1568) Referenzartikel zu POST von Ajax nach Java POST von Ajax nach Java (http://brissyu.blogspot.jp/2015/09/11spring-boot-web-ajax-csrf.html) Erhalten Sie json per POST im Frühjahr 3 (http://ponkotsusechan.hatenadiary.jp/entry/2016/02/01/173000_1)