


Utilisez Ajax pour implémenter un exemple simple de barre de progression avec pourcentage
Ce qui suit est un exemple de code pour vous présenter l'effet d'une barre de progression en pourcentage basée sur ajax. Les amis qui en ont besoin peuvent s'y référer
Exigence : lors de l'exécution d'opérations telles que le transfert de fichiers longue distance. et l'enregistrement, une barre de progression avec un pourcentage peut être affichée sur la page. Barre de progression en pourcentage, offrant aux utilisateurs une bonne expérience interactive
Étapes de mise en œuvre
<.>Page JSP
1. Ajouter une balise de table<table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none "> <tr> <td><br><br> <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse "> <tr bgcolor="#F7F7F6"> <td width="20%" height="100" valign="middle"> <table align='center' width='500'> <tr> <td colspan='2' align='center' id="progressPersent"><font size="2"> 正在进行保存,用时较长,请稍后... </font> </td> </tr> <tr> <td id='tdOne' height='25' width=1 bgcolor="blue"> </td> <td id='tdTwo' height='25' width=500 bgColor='#999999'> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>
/**添加带百分比的进度条*/ var xmlHttp; //创建ajax引擎 function createXMLHttpRequest() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } } function loading() { createXMLHttpRequest(); clearLoad(); var url = "elecCommonMsgAction_progressBar.do"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = createCallback; xmlHttp.send(null); } function createCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //每隔1秒钟执行一次percentServer()方法,直到当前访问结束 setTimeout("percentServer()", 1000); } } } function percentServer() { createXMLHttpRequest(); var url = "elecCommonMsgAction_progressBar.do"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = updateCallback; xmlHttp.send(null); } function updateCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //获取XML数据中的percent存放的百分比的值 var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data; var tdOne = document.getElementById("tdOne"); var progressPersent = document.getElementById("progressPersent"); //改变蓝色区域的宽度 tdOne.width = percent_complete + "%"; //将百分比的数值显示到页面上 progressPersent.innerHTML = percent_complete + "%"; //如果计算获取的百分比的数值没有达到100,则继续调用方法,直到操作结束为止 if (percent_complete < 100) { setTimeout("percentServer()", 1000); } } } } function clearLoad() { document.getElementById("load").style.display=""; document.getElementById("opperate1").style.display="none"; document.getElementById("opperate2").style.display="none"; }
Classe d'action
Méthode progressBar()/** * @throws Exception * @Name: progressBar * @Description: 在页面执行保存后,使用ajax,计算执行的百分比情况,将结果显示到页面上 * @Parameters: 无 * @Return: ajax如果不需要跳转页面,返回null或者NONE */ public String progressBar() throws Exception{ //从session中获取操作方法中计算的百分比 Double percent = (Double) request.getSession().getAttribute("percent"); String res = ""; //此时说明操作的业务方法仍然继续在执行 if(percent!=null){ //计算的小数,四舍五入取整 int percentInt = (int) Math.rint(percent); res = "<percent>" + percentInt + "</percent>"; } //此时说明操作的业务方法已经执行完毕,session中的值已经被清空 else{ //存放百分比 res = "<percent>" + 100 + "</percent>"; } //定义ajax的返回结果是XML的形式 PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); //存放结果数据,例如:<response><percent>88</percent></response> out.println("<response>"); out.println(res); out.println("</response>"); out.close(); return null; }
/** * @Name: save * @Description: 保存表单数据到数据库 * @Parameters: 无 * @Return: String:重定向到system/actingIndex.jsp再查询 */ public String save(){ //模拟:循环保存150次,方便观察百分比变化 for(int i=1;i<=150;i++){ elecCommonMsgService.saveCommonMsg(elecCommonMsg);//保存数据 request.getSession().setAttribute("percent", (double)i/150*100); } //线程结束,清空session request.getSession().removeAttribute("percent"); return "save"; }
Résumé
La barre de progression avec pourcentage est en fait implémentée en utilisant ajax pour ouvrir plusieurs threads lors de l'enregistrement : Un thread effectue l'opération de sauvegarde : 1. Calculez le pourcentage et mettez-le dans la session 2. Effacez la session à la fin du fil de discussion. Un autre fil de discussion, récupérez le pourcentage de contenu de la session : 1. Utilisez ajax pour renvoyer les résultats et les afficher sur la page Ce qui précède est ce que j'ai compilé tout le monde, j'espère que cela sera utile à tout le monde à l'avenir. Articles associés :jQuery+ajaxExplication détaillée des étapes pour appeler le service WCF
délai d'expiration jQuery AJAX méthode de gestion d'urgence
jquery+ajaxComment implémenter la fonction de pagination
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!

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

AI Hentai Generator
Générez AI Hentai gratuitement.

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)

Sujets chauds

Le numéro de série du disque dur est un identifiant important du disque dur et est généralement utilisé pour identifier de manière unique le disque dur et identifier le matériel. Dans certains cas, nous pouvons avoir besoin d'interroger le numéro de série du disque dur, par exemple lors de l'installation d'un système d'exploitation, de la recherche du pilote de périphérique approprié ou de la réparation du disque dur. Cet article présentera quelques méthodes simples pour vous aider à vérifier le numéro de série du disque dur. Méthode 1 : utilisez l’invite de commande Windows pour ouvrir l’invite de commande. Dans le système Windows, appuyez sur les touches Win+R, entrez « cmd » et appuyez sur la touche Entrée pour ouvrir la commande

Titre : Méthodes et exemples de code pour résoudre les erreurs 403 dans les requêtes jQuery AJAX L'erreur 403 fait référence à une demande selon laquelle le serveur interdit l'accès à une ressource. Cette erreur se produit généralement parce que la demande manque d'autorisations ou est rejetée par le serveur. Lorsque vous effectuez des requêtes jQueryAJAX, vous rencontrez parfois cette situation. Cet article explique comment résoudre ce problème et fournit des exemples de code. Solution : Vérifiez les autorisations : assurez-vous d'abord que l'adresse URL demandée est correcte et vérifiez que vous disposez des autorisations suffisantes pour accéder à la ressource.

jQuery est une bibliothèque JavaScript populaire utilisée pour simplifier le développement côté client. AJAX est une technologie qui envoie des requêtes asynchrones et interagit avec le serveur sans recharger la page Web entière. Cependant, lorsque vous utilisez jQuery pour effectuer des requêtes AJAX, vous rencontrez parfois des erreurs 403. Les erreurs 403 sont généralement des erreurs d'accès refusé par le serveur, probablement en raison de problèmes de politique de sécurité ou d'autorisation. Dans cet article, nous verrons comment résoudre la requête jQueryAJAX rencontrant une erreur 403.

L'utilisation d'Ajax pour obtenir des variables à partir de méthodes PHP est un scénario courant dans le développement Web. Grâce à Ajax, la page peut être obtenue dynamiquement sans actualiser les données. Dans cet article, nous présenterons comment utiliser Ajax pour obtenir des variables à partir de méthodes PHP et fournirons des exemples de code spécifiques. Tout d’abord, nous devons écrire un fichier PHP pour gérer la requête Ajax et renvoyer les variables requises. Voici un exemple de code pour un simple fichier PHP getData.php :

Comment résoudre le problème de l’erreur 403 jQueryAJAX ? Lors du développement d'applications Web, jQuery est souvent utilisé pour envoyer des requêtes asynchrones. Cependant, vous pouvez parfois rencontrer le code d'erreur 403 lors de l'utilisation de jQueryAJAX, indiquant que l'accès est interdit par le serveur. Cela est généralement dû aux paramètres de sécurité côté serveur, mais il existe des moyens de résoudre le problème. Cet article explique comment résoudre le problème de l'erreur 403 jQueryAJAX et fournit des exemples de code spécifiques. 1. faire

Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur et la requête Ajax ajoute les données à l'élément après l'avoir chargé. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir des données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.

Comment utiliser les fonctions Ajax pour réaliser une interaction de données asynchrone Avec le développement de la technologie Internet et Web, l'interaction des données entre le front-end et le back-end est devenue très importante. Les méthodes traditionnelles d’interaction avec les données, telles que l’actualisation des pages et l’envoi de formulaires, ne peuvent plus répondre aux besoins des utilisateurs. Ajax (JavaScript asynchrone et XML) est devenu un outil important pour l'interaction de données asynchrones. Ajax permet au Web d'utiliser JavaScript et l'objet XMLHttpRequest

Comprendre le framework Ajax : explorez cinq frameworks courants, nécessitant des exemples de code spécifiques Introduction : Ajax est l'une des technologies essentielles dans le développement d'applications Web modernes. Il est devenu un élément indispensable du développement front-end en raison de ses fonctionnalités telles que la prise en charge de l'interaction de données asynchrones et l'amélioration de l'expérience utilisateur. Afin de mieux comprendre et maîtriser le framework Ajax, cet article présentera cinq frameworks Ajax courants et fournira des exemples de code spécifiques pour aider les lecteurs à acquérir une compréhension approfondie de l'utilisation et des avantages de ces frameworks. 1. jQuery jQuery est actuellement le plus
