Cette fois, je vais vous apporter la liaison de la boîte pop-up Popup pour ajouter des événements de données (explication détaillée étape par étape). Quelles sont les précautions pour lier la boîte pop-up Popup à ajouter). événements de données. Ce qui suit est un cas pratique.
Logique
Un ensemble de données est affiché dans la fenêtre P1 et un bouton d'ajout est fourni
Cliquez sur le bouton pour faire apparaître une nouvelle fenêtre de navigateur P2 Après avoir ajouté une donnée et l'avoir soumise, la fenêtre P2 se ferme automatiquement
La nouvelle fenêtre ajoutée. les données sont ajoutées dynamiquement à la fenêtre et ont été sélectionnées dans P1
Connaissances requises : objet de fenêtre JS BOM ; fonction auto-exécutable JS
Réussite
Ce qui suit est une implémentation simple dans Django. Parce qu'elle est relativement simple, le routage et les vues sont écrits ensemble.
1. Routage et visualisation de la pièce
from django.conf.urls import url from django.shortcuts import render def p1(request): return render(request, 'p1.html') def p2(request): if request.method == 'GET': return render(request, 'p2.html') elif request.method == 'POST': city = request.POST.get('city') print('执行数据保存操作...') return render(request, 'popup.html',{'city':city}) urlpatterns = [ url(r'^p1.html/', p1), url(r'^p2.html/', p2), ]
2. Accédez à la vue p1 et revenez à la page p1.html :
<head> <meta charset="UTF-8"> <title>p1页面</title> </head> <body> <h2>p1页面</h2> <select id="cityChoose"> <option>上海</option> <option>北京</option> </select> <input type="button" value="添加" onclick="popupFunc();"/> <script> popupFunc = function () { window.open('/p2.html/', 'p2', "status=1, height:300, width:300, toolbar=0, resizeable=1") //open(url, name, 窗口参数),注意name不能重名 }; callback = function (city) { var opt = document.createElement('option'); opt.innerText = city; opt.setAttribute('selected', 'selected'); var selEle = document.getElementById('cityChoose'); selEle.appendChild(opt); } </script> </body>
Description :
1. Cliquez sur le bouton Ajouter et exécutez popupFunc : visitez '/p2.html/' et ouvrez la page p2.html dans une nouvelle fenêtre
2. Définissez la fonction de rappel callback : elle reçoit un paramètre ville, ajoutez-le dynamiquement à l’option déroulante et définissez-le sur l’état sélectionné.
3. p2.html s'affiche dans la fenêtre contextuelle comme suit :
<head> <meta charset="UTF-8"> <title>p2页面</title> </head> <body> <h2>p2页面</h2> <form method="post"> {% csrf_token %} <input type="text" name="city"> <input type="submit" value="提交"> </form> </body>
Remarque : Le paramètre action=url du formulaire n'est pas spécifié ici. Une fois que l'utilisateur a saisi les données, elles seront soumises par défaut à l'adresse actuelle, c'est-à-dire « /p2.html/ », et soumises à la vue. p2
4. Une fois que la vue p2 a reçu les données soumises, elle transmet le modèle et renvoie la page popup.html :
<head> <meta charset="UTF-8"> <title>正在返回</title> </head> <body> <script> (function (city) { window.opener.callback(city); window.close(); })("{{ city }}") </script> </body>
Description :
La fonction auto-exécutable JS est définie ici : elle appelle la fonction de rappel dans la fenêtre qui ouvre la fenêtre contextuelle (c'est-à-dire le rappel dans P1), et transmet les données d'entrée utilisateur en tant que paramètre qu'elle se ferme ;
Je pense que vous avez lu cet article. Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment utiliser les fonctions auto-exécutables JS et les extensions jQuery
Explication détaillée de l'utilisation Nécessite d'appeler js
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!