Maison >interface Web >js tutoriel >Présentation de plusieurs méthodes de transmission de données ajax et en arrière-plan au printemps

Présentation de plusieurs méthodes de transmission de données ajax et en arrière-plan au printemps

coldplay.xixi
coldplay.xixiavant
2020-12-04 16:26:327824parcourir

ajaxLa colonne présente la méthode de transmission des données en arrière-plan

Présentation de plusieurs méthodes de transmission de données ajax et en arrière-plan au printemps

Recommandé (gratuit) : ajax

J'ai récemment rencontré un problème lors de l'écriture d'ajax pour transmettre des données en arrière-plan. Je veux qu'ajax transmette les données en arrière-plan sous forme de json, et l'arrière-plan les recevra sous la forme. de map, puis renvoie les données sous forme de map . Cependant, j'ai continué à rencontrer le message d'erreur (*) (@415 Type de média non pris en charge) à la réception, puis je l'ai finalement résolu après avoir consulté les informations. Voici un résumé de plusieurs façons de transmettre des données entre ajax et l'arrière-plan. Les solutions aux problèmes ci-dessus se trouvent à la fin de cet article.


1. Mettez les données dans l'url et transmettez-les
js :
<code>
var id = $("#id").val();
$.ajax({
type: "POST",
url: "/IFTree/people/getPeopleById/"+id,//参数放在url中
success:function(data){ alert(data);
},
error:function(xhr, textStatus, errorThrown) {
}
});
</code>
Backend :

e03b848252eb9375d56be284e690e8738b08b3f7b2164ecdfa085c233ec163d4 getPeopleById(@PathVariable("id") int id) {         //@PathVariable("id") 如果参数名与url定义的一样注解可以不用定义("id")         System.out.println(id);         Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();         return map;     } }

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec

2. Mettez les données dans data
js :
<code>
var id = $("#id").val();
$.ajax({
type: "POST",
url: "/IFTree/people/getPeopleById",
data: {id:id},
success:function(data){ alert(data.result);
},
error:function(xhr, textStatus, errorThrown) {
}
});
</code>
Backend (deux méthodes). ):

e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    return map;
}

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec


@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    // 这里得到的都是字符串得转换成你需要的类型
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    return map;
}

1cd55414ff5abdfea5dd958e7e547fdd

3. Transmettre avec json (la situation mentionnée au début)
js (y compris quelques explications de paramètres ajax courants) :
<code>
var id = $("#id").val();
$.ajax({
type: "POST",//请求类型
timeout:10000,  //设置请求超时时间(毫秒)
async:ture,//是否为异步请求
cache:false,//是否从浏览器缓存中加载请求信息。
url: "/IFTree/people/getPeopleById",
contentType: "application/json;charset=UTF-8",//提交的数据类型
data: JSON.stringify({id:id}),//这里是把json转化为字符串形式
dataType: "json",//返回的数据类型
success:function(data){
$("#name").val(data.result.name);
},
error:function(xhr, textStatus, errorThrown) {
}
});
});
</code>
Backend :

1417fd9caae40516c8185eb949b251edffbe95d20f3893062224282accb13e8f

@RequestMapping(value = "getPeopleById", produces = "application/json")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(@RequestBody Map14bd1badcdee783757181db757c9943f body){
    System.out.println(""+body.get("id"));
    People people = peopleService.getPeopleById(Integer.valueOf((String)body.get("id")));
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    map.put("result", people);
    return map;
}

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec

Explication détaillée :

@RequestBody
Cette annotation lit d'abord la requête request Données texte, puis utilisez le HttpMessageConverter configuré par défaut pour analyser, lier les données à l'objet, puis lier l'objet aux paramètres du contrôleur.
@ResponseBody
Cette annotation est également utilisée pour convertir l'objet renvoyé par la méthode Controller dans le format spécifié via HttpMessageConverter, puis l'écrit dans la zone de données du corps de l'objet Response.

Srping mvc .xml (convertisseur de configuration)

ffbe95d20f3893062224282accb13e8f

 266dae442ac9dc95e3bdec99752e3b4d
 584454ffd05c6f0e3c55641435afbafd
    4d2d13b32b6824d433e20957bf031c9c
        0efe1b6b91208fe6ccb37533ee972a52
        4309a73696dbaeac0ddd115cebb6f9b7
            9cfc82ad645e238cfb23844fcc566fb0
            b15467429256a47420d73a292704d15c
            4fd24be84f9bb50bd43e1c13351e6665
            b6b7f77ea6dcfce4539ab4f516be1876
            05da36058a5ae95ab9385e514bd64d98
            21a4cbd21ee44ffbefb7b42e6a338a11
                d0e6ed04ce081f36fe4ad23a6e2f195d
                    4309a73696dbaeac0ddd115cebb6f9b7
                        8487820b627113dd990f63dd2ef215f3application/json;charset=UTF-84b175f9a50d57c75316becd702e959dc
                    17e5453f22e09a7f163b2d4ce32c48b7
                dde4123f2ed5a21d0bae333af89830f9
            4bb0e59fd50cbfe6f6ce2215b9d9424341a073a833a1192b911b28010fe7d5f7
        17e5453f22e09a7f163b2d4ce32c48b7
    dde4123f2ed5a21d0bae333af89830f9
4bb0e59fd50cbfe6f6ce2215b9d94243

1cd55414ff5abdfea5dd958e7e547fdd
ByteArrayHttpMessageConverter : Responsable de la lecture Obtenir des données au format binaire et écrire des données au format binaire ;
StringHttpMessageConverter : Responsable de la lecture des données au format chaîne et de l'écriture des données au format binaire
ResourceHttpMessageConverter : Responsable de lire les fichiers de ressources et écrire les données des fichiers de ressources ;
FormHttpMessageConverter : responsable de la lecture des données soumises par le formulaire
MappingJacksonHttpMessageConverter : responsable de la lecture et de l'écriture des données au format json ; >
SouceHttpMessageConverter : Responsable de la lecture et de l'écriture des données définies par javax.xml.transform.Source en XML ;
Jaxb2RootElementHttpMessageConverter : Responsable de la lecture et de l'écriture des données au format de balise XML ; 🎜>AtomFeedHttpMessageConverter
 : Responsable de la lecture et de l'écriture des données au format Atom ; RssChannelHttpMessageConverter
 : Responsable de la lecture et de l'écriture des données au format RSS Je n'utilise que ; le convertisseur json dans le projet, je dois donc importer le package json (maven) :

<code>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.11</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.11</version>
</dependency>
</code>

De même, les paramètres dans le contrôleur peuvent également être reçus sous forme de classes d'entité Data,

a commencé à signaler des erreurs (415 Type de média non pris en charge) car le fichier de configuration n'a pas été écrit correctement et le package correspondant n'a pas été importé.

S'il y a des lacunes ou des erreurs, merci de les signaler, merci
_

Si vous souhaitez en savoir plus sur la programmation, veuillez faire attention au formation php
!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer