Détails sur l'utilisation des paramètres Get/Post dans Jquery et AngularJS

La transmission de paramètres n'est pas difficile, mais cela peut parfois être un peu gênant lorsqu'il s'agit, par exemple, de transmettre un objet ou un formulaire au backend. Voici quelques méthodes d'utilisation. Jetons maintenant un œil à cet article angularjs

Tout d'abord, nous allons introduire plusieurs attributs que l'on confond souvent lors de l'envoi de requêtes :
dataType : Le format de données qui devrait être renvoyé par le serveur
mimeType : Indique comment traiter le format de données renvoyé par le serveur, afin que le navigateur le traite en conséquence, par exemple , définissez le type sur " Text/html", alors le client saura qu'il s'agit d'un document HTML, et je pourrai simplement le présenter directement s'il s'agit de "Application/pdf", alors le client saura qu'il doit démarrer ; le plug-in du lecteur PDF. Présenter le contenu.
contentType : fait référence au type de données que vous souhaitez envoyer. Par exemple, "application/json;charset=utf-8" est un type très courant et "application/x-www-form. -urlencoded ; charset=UTF-8" est le type par défaut.

De plus, comparez la différence entre Request Payload et Form :
Request Payload doit définir Content-Type : application/json
Dans l'outil de développement Chrome, vous voyez qu'il transmet un Object/json et notez qu'il contient également un tableau. Si vous soumettez la requête via ajax, le navigateur affichera uniquement le contenu que vous avez soumis via le corps Payload. Le navigateur ne sait pas d'où proviennent les données. D'où vient-il ?

Le format du formulaire doit définir Content-Type : application/x-www-form-urlencoded ou Content-Type : multipart. /form-data , ce que vous voyez dans l'outil de développement est le suivant. Dans ce cas, form-data est la charge utile de la requête. Le navigateur sait quelle clé correspond à quelle valeur, elle est donc affichée sous la forme xx=xx. Il convient de noter que le tableau est converti en chaîne.

Par conséquent, lorsque les données que vous devez transférer sont uniquement des paires clé-valeur, l'utilisation de Form suffit si vous devez transférer une structure complexe (telle que. un ensemble intégré de tableaux, d'objets), il est plus approprié d'utiliser RequestPayload. (Si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois angularjs Learning Manual pour apprendre)

Ensuite, comparons différentes situations de passage de paramètres~

Chapitre Dans un cas, passer une chaîne ordinaire
JQuery :

let params = {
    a: 1,
    b: 2
}
// 第一种方法:
$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二种方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS :

var conf = {
    method: 'GET',
    url: 'your_request',
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

Le deuxième cas : Publier les données du formulaire
JQuery :

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS :
Notez que les données doivent être converties en une chaîne codée en URL
ContentType doit être défini sur 'application/x-www-form -urlencoded' Le format des données transmises est Form

var conf = {
    method: 'POST',
    url: 'your_request',
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};

Le troisième cas : utilisez RequestPayload pour le paramètre Post
JQuery :
Définissez contentType sur "application/json", et Serialize params

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS :

var conf = {
    method: 'POST',
    url: 'your_request',
    data: {
        c: 3,
        d: 4
    }
};

Parfois, lorsque le serveur renvoie une réponse nulle, une erreur d'analyse XML apparaît dans Firefox. C'est parce que Firefox utilise l'analyse XML. serveur par défaut. Valeur de retour, et lorsque vous rencontrez une valeur de retour nulle, une erreur d'analyse se produit.
Il peut être résolu en définissant mimeType dans JQuery

$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

Il est plus difficile de définir mimeType dans AngularJS

Cet article se termine ici (vous voulez en savoir plus, allez simplement sur PHP Site chinois manuel d'apprentissage d'angularjs pour apprendre). Si vous avez des questions, vous pouvez laisser un message ci-dessous

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!