Comment appeler à distance la méthode ajax dans jquery via JSONP

Comment appeler à distance la méthode ajax dans jquery via JSONP_jquery

WBOY

Libérer： 2016-05-16 16:53:28

original

1612 Les gens l'ont consulté

Il existe de nombreux tutoriels sur Internet sur le concept de JSONP et pourquoi utiliser JSONP. Cette section montre principalement comment appeler à distance la méthode ajax dans JQUERY via JSONP

Introduisez d'abord les paramètres de $.ajax.
type : méthode de requête GET/POST
url : adresse de la requête
async : Type booléen, la valeur par défaut est true pour indiquer si la requête est asynchrone, si false elle indique synchrone.
dataType : le type de données renvoyé
jsonp : le nom du paramètre transmis au gestionnaire de requêtes ou à la page pour obtenir le nom de la fonction de rappel jsonp (généralement la valeur par défaut est : callback)
jsonpCallback : nom de la fonction de rappel jsonp personnalisé, la valeur par défaut est un nom de fonction aléatoire généré automatiquement par jQuery, vous pouvez également écrire "?", jQuery traitera automatiquement les données pour vous
succès : appelez la fonction exécutée avec succès
erreur : fonction de gestion des exceptions

1.Exemple 1
Côté serveur, on utilise l'ACTION de MVC pour renvoyer des données

Copiez le code Le code est la suivante :

 
public class HomeController : Controller 
{ 
// 
// GET: /Home/ 

public ActionResult Index() 
{ 
returnView( ); 
} 

public ActionResult ReturnJson() 
{ 
string callback = Request.QueryString["callback"] 
string json = " {'name':'Zhang三','age':'20'}"; 
string result = string.Format("{0}({1})", callback, json); 
returnContent (résultat); 
 } 

} 

Le client utilise jsonp pour transmettre des données

Copier le code Le code est le suivant :

@{
ViewBag.Title = "Index"
Layout = "~/Views/Shared/_Layout.cshtml; ";
}

< ;script type="text/javascript"> ;
functionSendData()
{
$.ajax({
type : "get",
async : false,
url : "/home/ReturnJson",
dataType : "jsonp",
succès : function(data){
alert(data.name)
},
error : function(){
alert('fail');
}
});
}

Après avoir cliqué sur le bouton Soumettre, j'ai découvert que Request.QueryString["callback"] côté serveur renvoyait un nom de fonction aléatoire. De cette façon, il est défini au format JSONP pour transférer les données

2. Nom de la fonction personnalisée
Vous pouvez personnaliser le nom de la fonction pendant le processus de transfert, utilisez simplement le paramètre jsonpCallback.
jsonp : Indique les paramètres passés, la valeur par défaut est callback, on peut également le personnaliser. Le segment du serveur utilise ce paramètre pour obtenir le nom de fonction personnalisé. Le serveur obtient Request.QueryString["callback"] comme ceci. >jsonpCallback indique le passage La valeur du paramètre est le nom de la fonction de rappel, qui est un nom personnalisé.

Copier le code Le code est le suivant :