Popup ポップアップボックスはデータイベントを追加するようにバインドされています (詳細なステップバイステップの説明)-jsチュートリアル-php.cn

Popup ポップアップボックスはデータイベントを追加するようにバインドされています (詳細なステップバイステップの説明)

php中世界最好的语言

リリース： 2018-04-16 14:12:31

オリジナル

3641 人が閲覧しました

今回は、データイベントを追加するための Popup ポップアップボックスバインディングについて説明します (詳細なステップバイステップの説明)。データイベントを追加するための Popup ポップアップボックスバインディングの注意事項は次のとおりです。実際のケースを見てみましょう。

ロジック

一連のデータがウィンドウ P1 に表示され、ボタンをクリックすると新しいブラウザウィンドウ P2 が表示されます。データを追加して送信すると、ウィンドウ P2 が自動的に閉じられます。ウィンドウ P1 に移動し、

必要な知識: JS BOM ウィンドウオブジェクトを選択します

達成しました

以下は、Django での簡単な実装です。比較的単純なので、ルーティングとビューを一緒に記述します。

1. ルーティングとビューの部分

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. ビュー p1 にアクセスし、ページ 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>

ログイン後にコピー

説明:

1. [追加] ボタンをクリックして、popupFunc を実行します。「/p2.html/」にアクセスし、新しいウィンドウで p2.html ページを開きます

コールバック関数を定義します

callback: パラメータ city を受け取り、それを動的に追加しますドロップダウンオプションを選択し、選択された状態に設定します。
3. p2.html が次のようにポップアップウィンドウに表示されます:

<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>

ログイン後にコピー

注: フォーム form の action=url パラメータはここでは指定されていません。ユーザーがデータを入力すると、デフォルトで現在のアドレス (「/p2.html/」) に送信され、view p2 に送信されます。

4. ビュー p2 が送信されたデータを受信した後、テンプレートを渡し、ページ Popup.html を返します:

<head>
 <meta charset="UTF-8">
 <title>正在返回</title>
</head>
<body>
<script>
 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")
</script>
</body>

ログイン後にコピー

説明:

JS の自己実行関数はここで定義されています。この関数は、ポップアップウィンドウを開くウィンドウでコールバック関数 (つまり、P1 のコールバック) を呼び出し、ユーザー入力データをパラメーターとして渡して、それ自体を閉じます。