interface Web
js tutoriel
Exemple détaillé du plug-in jQuery Mockjax simulant Ajax request_jquery
Exemple détaillé du plug-in jQuery Mockjax simulant Ajax request_jquery
1.Principe
jquery-mockjax est utilisé pour simuler les données de retour de la requête ajax frontale en arrière-plan.
Le principe est très simple
Placez un point d'arrêt dans votre code js à l'endroit où vous souhaitez envoyer une requête ajax, puis comparez la valeur de $.ajax.toString() dans le cas de [présentant jquery-mockjax] et [sans introduire jquery-mockjax] .
Évidemment, lorsque jquery-mockjax sera introduit, cette bibliothèque fictive remplacera la fonction ajax fournie par jquery. Cela facilite la moquerie.
Dans le processus de développement proprement dit, le front-end et le back-end ont négocié une interface unifiée, puis chacun a commencé ses propres tâches. En ce moment, j'ai une telle requête Ajax qui nécessite d'obtenir des données en arrière-plan :
$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
}); Mais ce service n'a peut-être pas encore été créé. Peut-être que le gars qui a développé le backend (ces beaux gars qui utilisent PHP, Ruby, .NET, GoldFusion, etc.) a déserté, ou peut-être qu'il est occupé avec autre chose. Quoi qu'il en soit, lorsque cette demande est faite, je n'obtiens pas les résultats souhaités, j'obtiens juste une erreur 404 (Not Found).
C'est vraiment mauvais, et insister est inutile. Les testeurs à côté de moi réclament de le tester, et j'ai hâte de voir des résultats immédiats. Pour le moment, vous ne pouvez compter que sur vous-même. L'une des meilleures méthodes consiste à simuler les requêtes Ajax. Ici, j'utilise le plug-in jQuery Mockjax.
Adresse : jQuery Mockjax
Il s'agit d'un plug-in jQuery. Lorsque vous le téléchargez et le citez, placez-le après jQuery :
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div id="result"></div> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="vendor/jquery.mockjax.js"></script> </body> </html>
Exécutez ensuite le code pour simuler la requête avant le code de la requête, utilisez la méthode $.mockjax() fournie par le plug-in, et précisez temporairement les deux paramètres url et ResponseText :
$.mockjax({
url: '/products/',
responseText: 'Here you are!'
}); Il surveillera les requêtes Ajax avec la même URL et interceptera et simulera la réponse lorsque la requête est émise. La valeur de ResponseText est le contenu de la réponse simulée, afin que mon programme puisse être exécuté avec plaisir. est 'Vous y êtes'. Ce contenu sera affiché dans div#result. Lorsque je n'ai plus besoin de me moquer de la requête, je peux utiliser la méthode $.mockjax.clear() pour l'effacer :
$.mockjax.clear();
Une fois le développement du service en arrière-plan terminé, je peux utiliser cette méthode pour effacer toutes les requêtes simulées et expérimenter l'effet réel de la requête. Si vous ne souhaitez pas effacer toutes les demandes de simulation en même temps, mais plutôt cibler une certaine demande de simulation, vous pouvez transmettre l'ID de la demande de simulation, et chaque demande de simulation renverra une valeur d'ID :
var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo); Cela efface la deuxième demande de simulation et conserve la première.
Étant donné que l'adresse url de la requête Ajax doit correspondre à l'url de la requête simulée, en supposant qu'il y ait beaucoup de requêtes sur la page, il sera très pénible de simuler chaque requête Heureusement, le paramètre url du plug-in. fournit un caractère générique * Méthode :
$.mockjax({
url: '/books/*'
}); En plus de faire correspondre les requêtes avec l'adresse URL /books/cook, vous pouvez également faire correspondre les requêtes avec l'adresse /books/math et plus encore. Vous pouvez même utiliser des expressions régulières pour des modèles de correspondance plus complexes :
.
$.mockjax({
url: /^\/data\/(cook|math)$/i
}); Utilisez le paramètre data du plug-in pour effectuer différentes réponses simulées en fonction de différentes données de requête :
$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
}); Même pour une même adresse URL, le contenu de la réponse obtenue est différent lorsque les données demandées sont différentes. En plus des chaînes de texte brut, le contenu de la réponse peut également utiliser json
Formater la chaîne.
Le plug-in fournit également un objet de paramétrage par défaut $.mockjaxSettings. Les paramètres qui ne sont pas spécifiés utiliseront ces valeurs par défaut :
.
$.mockjaxSettings = {
logging: true,
status: 200,
statusText: "OK",
responseTime: 500,
isTimeout: false,
throwUnmocked: false,
contentType: 'text/plain',
response: '',
responseText: '',
responseXML: '',
proxy: '',
proxyType: 'GET',
lastModified: null,
etag: '',
headers: {
etag: 'IJF@H#@923uf8023hFO@I#H#',
'content-type' : 'text/plain'
}
}; Après avoir modifié la valeur par défaut, les requêtes de simulation suivantes utiliseront la valeur modifiée :
$.mockjaxSettings.contentType = "application/json";
Seule la valeur par défaut de contentType est modifiée ici.
Ce qui précède explique les connaissances pertinentes du plug-in jQuery Mockjax pour simuler les requêtes Ajax à travers des exemples. J'espère que cela sera utile à tout le monde.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment prolonger le délai d'attente des requêtes Ajax ?
Jan 26, 2024 am 10:09 AM
Comment prolonger le délai d’expiration des requêtes Ajax ? Lorsque nous effectuons des requêtes réseau, nous rencontrons souvent des situations dans lesquelles nous devons traiter de grandes quantités de données ou des calculs complexes, ce qui peut entraîner un délai d'attente de la requête et un échec de renvoi normal des données. Afin de résoudre ce problème, nous pouvons garantir que la demande peut être complétée avec succès en prolongeant le délai d'expiration de la demande Ajax. Ce qui suit présentera quelques méthodes et exemples de code spécifiques pour prolonger le délai d'expiration des requêtes Ajax. Lorsque vous effectuez une requête Ajax à l'aide de l'attribut timeout, vous pouvez définir l'attribut timeout sur
Combien de temps faut-il pour que les requêtes ajax expirent ?
Nov 20, 2023 am 10:29 AM
Les requêtes AJAX n'ont pas de délai d'expiration fixe : « Asynchronous JavaScript and XML » est une technologie d'envoi de requêtes asynchrones sur des pages Web, qui utilise JavaScript pour envoyer des requêtes au serveur et recevoir des réponses sans actualiser la page entière.
Comment utiliser des contrôleurs pour gérer les requêtes Ajax dans le framework Yii
Jul 28, 2023 pm 07:37 PM
Dans le framework Yii, les contrôleurs jouent un rôle important dans le traitement des requêtes. En plus de gérer les requêtes de pages régulières, les contrôleurs peuvent également être utilisés pour gérer les requêtes Ajax. Cet article expliquera comment gérer les requêtes Ajax dans le framework Yii et fournira des exemples de code. Dans le framework Yii, le traitement des requêtes Ajax peut s'effectuer à travers les étapes suivantes : La première étape consiste à créer une classe contrôleur (Controller). Vous pouvez hériter de la classe de contrôleur de base yiiwebCo fournie par le framework Yii
Comment choisir la bonne bibliothèque de requêtes Ajax pour votre projet
Jan 30, 2024 am 08:32 AM
Guide pratique : Quelles bibliothèques de requêtes Ajax conviennent à votre projet ? Avec le développement continu du développement front-end, Ajax est devenu un élément indispensable du développement Web. Le choix d'une bibliothèque de requêtes Ajax adaptée au projet est crucial pour améliorer l'efficacité du développement et optimiser l'expérience utilisateur. Cet article présentera plusieurs bibliothèques de requêtes Ajax couramment utilisées pour aider les lecteurs à choisir l'outil adapté à leurs propres projets. jQueryAjax Il est indéniable que jQuery est l'une des bibliothèques JavaScript les plus populaires. Il fournit un riche
Outils essentiels : Comprendre quelles sont les bibliothèques de requêtes Ajax couramment utilisées ?
Jan 30, 2024 am 11:00 AM
L'essentiel du développement : découvrez quelles sont les bibliothèques de requêtes Ajax couramment utilisées ? Dans le développement front-end moderne, l'utilisation d'Ajax pour les requêtes asynchrones est devenue une fonctionnalité standard, et le choix d'une bibliothèque de requêtes Ajax appropriée peut nous permettre de traiter les requêtes réseau plus efficacement, améliorant ainsi l'efficacité du développement et l'expérience utilisateur. Cet article explorera certaines bibliothèques de requêtes Ajax couramment utilisées pour aider les développeurs à choisir les outils adaptés à leurs projets. jQueryAjax : En tant que l'une des bibliothèques JavaScript les plus populaires, jQuery fournit de puissantes fonctions de requête Ajax.
Puis-je personnaliser le délai d'expiration des requêtes Ajax ?
Jan 26, 2024 am 11:13 AM
Le délai d’expiration des requêtes Ajax peut-il être personnalisé ? Dans le développement Web, nous utilisons souvent Ajax pour implémenter des requêtes asynchrones afin de charger dynamiquement des données dans la page. Lorsque nous effectuons des requêtes Ajax, nous devons parfois contrôler le délai d'expiration de la requête, c'est-à-dire définir un délai et la traiter si aucune réponse n'est reçue dans le délai spécifié. Alors, le délai d’expiration des requêtes Ajax peut-il être personnalisé ? Cet article présentera ce problème en détail et fournira des exemples de code spécifiques. Utiliser la fonction Ajax de jQuery
Qu'est-ce qui provoque l'expiration d'une requête Ajax ?
Jan 26, 2024 am 10:53 AM
Dans quelles circonstances une requête Ajax expirera-t-elle ? Avec le développement des applications Web, la technologie Ajax (JavaScript asynchrone et XML) est devenue un élément essentiel du développement Web. Grâce à Ajax, nous pouvons obtenir des données du serveur et mettre à jour dynamiquement le contenu de la page Web sans actualiser la page entière. Cependant, lorsque vous utilisez Ajax pour envoyer des requêtes, vous rencontrez parfois une expiration de requête. Alors, dans quelles circonstances une requête Ajax expirera-t-elle ?
Comment définir le délai d'attente pour les requêtes Ajax ?
Jan 26, 2024 am 09:23 AM
Comment définir le délai d’expiration d’une requête Ajax ? Besoin d'exemples de code spécifiques Avec le développement des applications Internet, Ajax est devenu un élément indispensable du développement Web. Lors de l'envoi de requêtes Ajax, nous devons parfois limiter le délai d'expiration de la requête pour éviter une mauvaise expérience utilisateur ou le blocage du navigateur causé par une requête trop longue. Cet article présentera en détail comment définir le délai d'expiration des requêtes Ajax et donnera des exemples de code spécifiques. La définition du délai d'expiration des requêtes Ajax nécessite principalement XMLHttpRequest
