Heim  >  Artikel  >  Web-Frontend  >  Einführung verschiedener Methoden der Ajax- und Hintergrunddatenübertragung im Frühjahr

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

coldplay.xixi
coldplay.xixinach vorne
2020-12-04 16:26:327733Durchsuche

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>
Backend: e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

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

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec


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>
Backend (zwei Methoden):
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. Ü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>

Backend:

e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

@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;
}

1cd55414ff5abdfea5dd958e7e547fdd < ;/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)

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
: 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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jianshu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen