Comment implémenter jQuery+JSONP inter-domaines-Tutoriel H5-php.cn

Cette fois, je vais vous montrer comment implémenter jQuery+JSONP entre domaines et quelles sont les précautions à prendre pour l'implémentation inter-domaines jQuery+JSONP. Ce qui suit est un cas pratique, jetons un coup d'œil.

Après avoir compris jsonp, tout le monde doit également comprendre que jsonp est principalement utilisé pour obtenir des données inter-domaines. Aujourd'hui, nous allons discuter en détail de la façon d'appliquer jsonp dans la pratique pour obtenir des

JSONP inter-domaines. (JSON with Padding) est un « mode d'utilisation » de JSON qui peut être utilisé pour résoudre le problème de l'accès aux données inter-domaines par les navigateurs grand public. En raison de la politique de même origine, de manière générale, les pages Web situées sur server1.example.com ne peuvent pas communiquer avec des serveurs autres que server1.example.com, à l'exception de l'élément HTML Grâce à cette politique ouverte de l'élément , les pages Web peuvent obtenir des données JSON générées dynamiquement à partir d'autres sources, et ce modèle d'utilisation est appelé JSONP. Les données capturées avec JSONP ne sont pas du JSON, mais du JavaScript arbitraire, qui est exécuté avec un interpréteur JavaScript au lieu d'être analysé avec un analyseur JSON.

Le paragraphe ci-dessus provient de l'Encyclopédie Baidu. Les concepts sont toujours aussi abstraits et difficiles à comprendre. L'expression la plus intuitive est de regarder des exemples. Après avoir vu trop d’exemples et compris ce point, vous apprendrez naturellement à le décrire de manière abstraite. C'est pourquoi on dit souvent que « l'apprentissage des connaissances est un processus allant de mince à épais, et d'épais à mince ». Bon, allons trop loin. Regardons directement un exemple.

Problème : Il existe une page locale demo.html qui doit obtenir des données de http://localhost:3561/User/GetAllNames et les afficher.

Réponse : Étant donné que les deux parties à la question ne sont pas sur le même serveur, jsonp doit être utilisé pour l'accès inter-domaines.

① Écriture du client

Le client utilise la méthode $.getJson fournie dans jQuery pour l'accès inter-domaines. getJson a 3 paramètres :

I.url : adresse de demande

II. data : paramètres envoyés au serveur

III.

La méthode d'utilisation de getJson est fondamentalement la même que la méthode $.get ordinaire. La différence est que getJson doit ajouter callback=? à la partie paramètre après que l'url soit automatiquement remplacée par le bon ? one. Nom de la fonction pour exécuter la fonction de rappel. Ensuite, exploitez l'objet json renvoyé par le domaine étranger dans la fonction de rappel, et le paramètre de rappel de la fonction de rappel est l'objet json.

$.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); Copier après la connexion ② Écriture côté serveur

La logique côté serveur est principalement de sérialiser les données dans une chaîne json, puis de les encapsuler sous la forme de "callback(json )". Le rappel est automatiquement généré par jQuery et le nom de la fonction est transmis au serveur. Ce qui suit est implémenté en C# :

public class UserController : Controller { public string GetAllNames(string callback) { string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(names); return string.Format("{0}({1})", callback, json); } } Copier après la connexion À ce stade, le problème a été résolu avec succès.

Réflexion : Si le serveur a un rappel codé en dur (par exemple : return string.Format("moty({0})", json);), alors le client Comment l'écrire ?

Référence :

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); Copier après la connexion Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !