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
Libérer: 2020-12-04 16:27:51
avant
7832 Les gens l'ont consulté

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>
Copier après la connexion
Backend :

<code&gt ;</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RequestMapping(value = "getPeopleById/{id}")
@ResponseBody
    public Map<String, Object> getPeopleById(@PathVariable("id") int id) {
        //@PathVariable("id") 如果参数名与url定义的一样注解可以不用定义("id")
        System.out.println(id);
        Map<String, Object> map = new HashMap<String, Object>();
        return map;
    }
}
Copier après la connexion

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>
Copier après la connexion
Backend (deux méthodes). ):

<code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map<String, Object> getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    Map<String, Object> map = new HashMap<String, Object>();
    return map;
}
Copier après la connexion


@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map<String, Object> getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    // 这里得到的都是字符串得转换成你需要的类型
    Map<String, Object> map = new HashMap<String, Object>();
    return map;
}
Copier après la connexion

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>
Copier après la connexion
Backend :

< pre></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RequestMapping(value = &quot;getPeopleById&quot;, produces = &quot;application/json&quot;) @ResponseBody public Map&lt;String, Object&gt; getPeopleById(@RequestBody Map&lt;String, Object&gt; body){ System.out.println(&quot;&quot;+body.get(&quot;id&quot;)); People people = peopleService.getPeopleById(Integer.valueOf((String)body.get(&quot;id&quot;))); Map&lt;String, Object&gt; map = new HashMap&lt;String, Object&gt;(); map.put(&quot;result&quot;, people); return map; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>

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)

</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;!-- spring MVC提供的适配器 spring默认加载 (如果不修改默认加载的4类转换器,该bean可不配置)--&gt; &lt;bean class=&quot;org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter&quot;&gt; &lt;property name=&quot;messageConverters&quot;&gt; &lt;!-- 该适配器默认加载以下4类转换器--&gt; &lt;list&gt; &lt;bean class=&quot;org.springframework.http.converter.BufferedImageHttpMessageConverter&quot; /&gt; &lt;bean class=&quot;org.springframework.http.converter.ByteArrayHttpMessageConverter&quot; /&gt; &lt;bean class=&quot;org.springframework.http.converter.xml.SourceHttpMessageConverter&quot; /&gt; &lt;bean class=&quot;org.springframework.http.converter.xml.XmlAwareFormHttpMessageConverter&quot; /&gt; &lt;bean class=&quot;org.springframework.http.converter.StringHttpMessageConverter&quot; /&gt; &lt;bean class=&quot;org.springframework.http.converter.json.MappingJacksonHttpMessageConverter&quot;&gt; &lt;property name=&quot;supportedMediaTypes&quot;&gt; &lt;list&gt; &lt;value&gt;application/json;charset=UTF-8&lt;/value&gt; &lt;/list&gt; &lt;/property&gt; &lt;/bean&gt;&lt;!--这里配置了json转换器支持的媒体类型--&gt; &lt;/list&gt; &lt;/property&gt; &lt;/bean&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p>
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>
Copier après la connexion

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!

Étiquettes associées:
source:jianshu.com
Article précédent:Les éléments constitutifs de JavaScript Web Workers et 5 scénarios d'utilisation Article suivant:En savoir plus sur les modules, l'importation et l'exportation en JavaScript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal