La boîte de dialogue contextuelle est destinée à ajouter un événement de données (explication détaillée étape par étape)-js tutoriel-php.cn

La boîte de dialogue contextuelle est destinée à ajouter un événement de données (explication détaillée étape par étape)

php中世界最好的语言

Libérer： 2018-04-16 14:12:31

original

3553 Les gens l'ont consulté

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),
]

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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 ;
Si la vue p2 renvoie un message d'erreur, il peut également être affiché dans popup.html (omis).
Pour les fonctions auto-exécutables, veuillez vous référer à JavaScript Fonctions auto-exécutables et méthodes d'extension jQuery

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

Explication détaillée des étapes de définition des informations d'en-tête dans l'intercepteur de ressources vue

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!