Beispiel für die Übermittlung von Formulardaten durch einen Axios-Beitrag

Im Folgenden werde ich Ihnen ein Beispiel für die Übermittlung von Formulardaten im Axios-Beitrag vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Das Vue-Framework empfiehlt die Verwendung von Axios zum Senden von Ajax-Anfragen. Ich habe zuvor auch einen Blog geschrieben, um zu erklären, wie man Axios in Vue-Komponenten verwendet. Aber vorher habe ich Get Requests nur zum Spaß verwendet. Jetzt verwende ich die Post-Methode beim Einrichten meines eigenen Blogs. Es stellt sich heraus, dass das Backend (node.js) die vom Frontend übergebenen Parameter überhaupt nicht erhalten kann. Nach einigem Recherchieren habe ich endlich das Problem gefunden.

Vier Codierungsmethoden für Beitragseinreichungsdaten

1.application/x-www-form-urlencoded

Dies sollte die gebräuchlichste Post-Kodierungsmethode sein. Im Allgemeinen werden Formularübermittlungen standardmäßig auf diese Weise übermittelt. Die meisten Serversprachen unterstützen diese Methode gut. In PHP können Sie $_POST["key"] verwenden, um den Wert des Schlüssels abzurufen. Im Knoten können wir Querystring-Middleware verwenden, um Parameter

app.post("/server",function(req,res){
 req.on("data",function(data){
 let key=querystring.parse(decodeURIComponent(data)).key;
 console.log("querystring:"+key)
 });
});

zu trennen 2.multipart/form-data

Dies ist auch ein relativ häufiges Postdatenformat. Wenn wir ein Formular zum Hochladen von Dateien verwenden, müssen wir das Formularformular verwenden Das enctype-Attribut oder der contentType-Parameter von Ajax entspricht multipart/form-data. Die bei Verwendung dieses Codierungsformats an den Hintergrund gesendeten Daten sehen folgendermaßen aus:

Verschiedene Felder beginnen mit --boundary, gefolgt von Inhaltsbeschreibungsinformationen und schließlich dem spezifischen Inhalt des Feld . Wenn eine Datei übertragen wird, müssen auch der Dateiname und die Dateitypinformationen enthalten sein

3.application/json

Axios-Standardübermittlungsverwendungen dieses Format. Wenn diese Kodierungsmethode verwendet wird, wird der serialisierte JSON-String an den Hintergrund übergeben. Wir können application/json mit den von application/x-www-form-urlencoded gesendeten Daten vergleichen.

Erste application/json:

Dann application/x -www-form-urlencoded:

Es ist deutlich zu erkennen, dass die von application/x-www-form-urlencoded in den Hintergrund hochgeladenen Daten in Form eines Schlüssels vorliegen -value organisiert, und application/json ist direkt eine JSON-Zeichenfolge. Wenn der Hintergrund bei der Verarbeitung von application/json immer noch die Methode zum Umgang mit application/x-www-form-urlencoded verwendet, treten Probleme auf.

Zum Beispiel verwendet der Hintergrund node.js immer noch die vorherige Methode zum Umgang mit application/x-www-form-urlencoded, dann sind die nach querystring.parse(decodeURIComponent(data)) erhaltenen Daten wie folgt

Zu diesem Zeitpunkt kann querystring.parse(decodeURIComponent(data)).key nur undefiniert werden

4.text/xml

Das verbleibende Codierungsformat ist Text/XML, das ich nicht oft verwendet habe

Lösung

Da wir nun wissen, dass die Axios-Post-Methode standardmäßig das Application/JSON-Format zum Codieren von Daten verwendet, gibt es zwei Lösungen: Eine besteht darin, die Methode zum Empfangen von Parametern im Hintergrund zu ändern, und die andere darin, das Codierungsformat zu ändern der Axios-Post-Methode an application/x-www-form-urlencoded, sodass keine Hintergrundänderung erforderlich ist.

Sehen wir uns zunächst die erste Lösung an

In der Vue-Komponente lautet der Code für Axios zum Senden einer Post-Anfrage wie folgt

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
 name:this.name,
 password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

Zu diesem Zeitpunkt sehen die Informationen in den Netzwerk-Headern der Konsole wie folgt aus:

Empfangsdaten in der Der Hintergrund erfordert die Verwendung der Body-Parser-Middleware. Wir haben sie im Voraus installiert und dann im Hintergrundcode auf den Body-Parser verwiesen

In diesem Screenshot ist der Code, der funktioniert einfach const bodyParser=require("body-parser ");

Als nächstes Body-Parser beim Routing verwenden

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

Zu diesem Zeitpunkt Nachdem das Frontend eine Post-Anfrage gesendet hat, wird in der Hintergrundkonsole Req.body

gedruckt. Zu diesem Zeitpunkt kann der entsprechende Wert über req.body.name abgerufen werden oder req.body.password.

Diese Methode ist relativ einfach und erfordert nicht zu viele Änderungen an der Rezeption. Es wird empfohlen, diese Methode zu verwenden.

Die zweite Lösung, die spezifischen Vorgänge sind wie folgt

Frontend

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
 'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
 name:this.name,
 password:this.password
 },
 transformRequest: [function (data) {
 let ret = ''
 for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 }
 return ret
 }],
}).then((res)=>{
 console.log(res.data);
})

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。

后台代码如下

app.post("/api/haveUser",function(req,res){
 let haveUser=require("../api/server/user.js");
 req.on("data",function(data){
  let name=querystring.parse(decodeURIComponent(data)).name;
  let password=querystring.parse(decodeURIComponent(data)).password;
  console.log(name,password)
  haveUser(name,password,res);
 });
});

这种方法明显就要比第一种麻烦一点，但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jQuery+Cookie实现切换皮肤功能

jQuery实现的回车触发按钮事件功能示例

基于jQuery实现Ajax验证用户名是否可用实例

Das obige ist der detaillierte Inhalt vonBeispiel für die Übermittlung von Formulardaten durch einen Axios-Beitrag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!