Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung verschiedener Methoden der Ajax- und Hintergrunddatenübertragung im Frühjahr

coldplay.xixi
Freigeben: 2020-12-04 16:27:51
nach vorne
7801 Leute haben es durchsucht

AjaxIn der Kolumne wird die Methode zum Übertragen von Daten mit dem Hintergrund vorgestellt in Form von json sein Die Daten werden an den Hintergrund übertragen, der sie in Form einer Karte empfängt und die Daten dann in Form einer Karte zurückgibt. Allerdings stieß ich an der Rezeption immer wieder auf die Fehlermeldung (*) (@415 Unsupported media type), und dann konnte ich das Problem nach Rücksprache mit den Informationen schließlich lösen. Hier finden Sie eine Zusammenfassung verschiedener Möglichkeiten zur Datenübertragung zwischen Ajax und dem Hintergrund. Die Lösungen für die oben genannten Probleme finden Sie am Ende dieses Artikels.

Einführung verschiedener Methoden der Ajax- und Hintergrunddatenübertragung im Frühjahr1. Geben Sie die Daten in die URL ein und übergeben Sie sie

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>
Nach dem Login kopieren
Backend:
<code></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;
    }
}
Nach dem Login kopieren


2. Fügen Sie es in Daten ein
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>
Nach dem Login kopieren
Backend (zwei Methoden):
<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;
}
Nach dem Login kopieren

@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;
}
Nach dem Login kopieren
3. Übertragen mit json (die am Anfang erwähnte Situation)
js (einschließlich einiger allgemeiner Ajax-Parametererklärungen):
<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>
Nach dem Login kopieren

Backend:

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

< ;/pre>

Detaillierte Erklärung:
@RequestBody
Diese Annotation liest zuerst die Textdaten der Anforderungsanforderung, verwendet dann den standardmäßig konfigurierten HttpMessageConverter zum Parsen, bindet die Daten an das Objekt und bindet das Objekt dann an den Controller zu den Parametern in .
@ResponseBody
Diese Annotation wird auch verwendet, um das von der Controller-Methode zurückgegebene Objekt über HttpMessageConverter in das angegebene Format zu konvertieren und es dann in den Körperdatenbereich des Response-Objekts zu schreiben.

Srping mvc .xml (Konfigurationskonverter)

</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">Nach dem Login kopieren</div></div><h6>

ByteArrayHttpMessageConverter
: Verantwortlich für das Lesen von Daten im Binärformat und das Ausschreiben von Daten im Binärformat;

StringHttpMessageConvert ähm

: Verantwortlich zum Lesen von Daten im String-Format und zum Schreiben von Daten im Binärformat;
ResourceHttpMessageConverter

: Verantwortlich für das Lesen von Ressourcendateien und das Ausschreiben von Ressourcendateidaten;

FormHttpMessageConverter
: Verantwortlich für das Lesen der vom Formular übermittelten DatenMappingJacksonHttpMessageConverter
: Verantwortlich für Lesen und Schreiben von Daten im JSON-Format; SouceHttpMessageConverter
: Verantwortlich für das Lesen und Schreiben von Daten, die durch javax.xml.transform.Source in XML definiert sind; Jaxb2RootElementHttpMessageConverter
: Verantwortlich für das Lesen und Schreiben von Daten im XML-Tag-Format; AtomFeedHttpMessage Konverter
: Verantwortlich für das Lesen und Schreiben von Daten im Atom-Format; RssChannelHttpMessageConverter
: Verantwortlich für das Lesen und Schreiben von Daten im RSS-Format; Ich verwende nur den JSON-Konverter im Projekt, daher muss ich ihn über das JSON-Paket (Maven) importieren ) nicht importiert.
Wenn es Mängel oder Fehler gibt, weisen Sie diese bitte darauf hin, vielen Dank_
Wenn Sie mehr über das Programmieren erfahren möchten, achten Sie bitte auf die Rubrik
PHP-Schulung!

Das obige ist der detaillierte Inhalt vonEinführung verschiedener Methoden der Ajax- und Hintergrunddatenübertragung im Frühjahr. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jianshu.com
Vorheriger Artikel:Die Bausteine ​​von JavaScript Web Workern und 5 Nutzungsszenarien Nächster Artikel:Erfahren Sie mehr über Module, Import und Export in JavaScript
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage