Je souhaite échanger des données JSON (objets) avec Ajax entre Java et JavaScript! ~ Édition de printemps ~

Passer les données JSON de JS au contrôleur Java

J'ai remis le JSON lorsque j'ai créé une simple application TODO, donc un mémorandum J'utilise la communication Ajax avec jQuery

todo.js

/**Ajouter un nouveau à la base de données. */
  function postItem(newContent) {

    let todo = {
      content: newContent
    };

    $.ajax({
      type: "post",
      url: contextPath + "/post",  //OK si c'est l'URL pour appeler le contrôleur
      data: { jsonTodo: JSON.stringify(todo) }, //JSON(Tableau associatif)À une chaîne
      dataType: "json"
    }).then(function (result) {
      console.log('Vous pouvez écrire le traitement au moment du succès. Comme ci-dessous.');
      let content = result.content;
    }, function () {
      console.log('Vous pouvez écrire le traitement au moment de l'échec');
    });

Kimo est JSON.stringify (convertit le JSON cible en chaîne)

TodoController.java

	/**
	 *Ajouter un nouveau TODO.
	 * @param todo Nouveau message TODO
	 * @retourner TODO avec la mise à jour reflétée
	 */
	@ResponseBody //Étant donné que l'encodeur JSON est construit dans l'annotation, l'objet peut être renvoyé directement à JS.
	@PostMapping("/post")
	public Todo post(@RequestBody Todo todo) throws JsonParseException, JsonMappingException, IOException  {
        todoRepository.saveAndFlush(todo); //mise à jour de la base de données
		return todo;
	}

Passer des objets du contrôleur Java à JS

TodoController.java

    @ResponseBody //Convertit automatiquement l'objet retourné en une chaîne de caractères pouvant être interprétée par JSON
	@GetMapping("/find_all_asc")
	public List<Todo> findAllOrderASC(){
		List<Todo> todos = todoRepository.findAll(new Sort(Direction.ASC, "id"));
		return todos;
	}

todo.js

  /**Initialisation de la liste TODO*/
  $.getJSON(contextPath + "/find_all_asc", null,
    function (data, textStatus, jqXHR) { //JSON est coincé dans les données
　　　 //Vous pouvez décrire le processus que vous souhaitez faire avec le JSON acquis
      data.forEach(todo => {
        console.log(todo.content);  
      });
    }
  );

Ajax Setup (inclut la description de jQuery)

JavaScript

$(function () {
    /**
     * layout.Chemin de contexte obtenu à partir de html.
     *Exemple)/elabel/Si vous souhaitez accéder à la modification, cliquez sur "contextPath"+ 'elabel/edit'Peut être utilisé comme URL.
     */
    contextPath = $('#contextPath').val();
});

/**Si vous souhaitez modifier le paramètre, écrivez-le dans la méthode Ajax individuelle.. */
(function () {
    $.ajaxSetup({
        cache: false,
        /**Ne pas mettre en cache la réponse de la communication Ajax une fois utilisée. */
        timeout: 15000,
        /**Réglage du délai (provisoire)*/
        beforeSend: function (xhr, settings) {
            /**Traitement juste avant le début de la communication*/
            setCsrfTokenToAjaxHeader();
            // showKurukuru();
        },
        success: function (data, status, xhr) {
            /**Traitement lorsque la communication est réussie*/
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            /**Traitement en cas d'échec de la communication*/
            console.log("la communication ajax a échoué");
            console.log("XMLHttpRequest : " + XMLHttpRequest.status);
            console.log("textStatus     : " + textStatus);
            console.log("errorThrown    : " + errorThrown.message);
        },
        complete: function (xhr, status) {
            /**Traitement lorsque la communication est terminée (qu'il s'agisse d'une erreur ou non)*/
            //hideKurukuru();
        },
    });
})();

/**
 *Une fonction qui peut intégrer un jeton basé sur les mesures CSRF de Spring Security dans l'en-tête de la communication ajax..
 *Veuillez l'utiliser en l'appelant juste avant la communication Ajax à utiliser..
 */

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()}" />

Article de référence

Nifty JSON.stringify (http://www.symmetric.co.jp/blog/archives/1568) Article de référence sur POST d'Ajax vers Java POST d'ajax vers java (http://brissyu.blogspot.jp/2015/09/11spring-boot-web-ajax-csrf.html) Recevez json par POST au spring3 (http://ponkotsusechan.hatenadiary.jp/entry/2016/02/01/173000_1)