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

今回は、データ イベントを追加するための 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 に戻ります:

 <meta>
 <title>p1页面</title>


<h2 id="p-页面">p1页面</h2>
<select>
 <option>上海</option>
 <option>北京</option>
</select>
<input>
<script>
 popupFunc = function () {
  window.open(&#39;/p2.html/&#39;, &#39;p2&#39;, "status=1, height:300, width:300, toolbar=0, resizeable=1")
  //open(url, name, 窗口参数)，注意name不能重名
 };
 callback = function (city) {
  var opt = document.createElement(&#39;option&#39;);
  opt.innerText = city;
  opt.setAttribute(&#39;selected&#39;, &#39;selected&#39;);
  var selEle = document.getElementById(&#39;cityChoose&#39;);
  selEle.appendChild(opt);
 }
</script>

説明:

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

2.

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

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

 <meta>
 <title>p2页面</title>


<h2 id="p-页面">p2页面</h2>

 {% csrf_token %}    

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

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

 <meta>
 <title>正在返回</title>


<script>
 (function (city) {
  window.opener.callback(city);
  window.close();
 })("{{ city }}")
</script>

説明:

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

• p2ビューが

  エラーメッセージ
を返した場合は、popup.htmlにも表示することができます(省略)。

• 自己実行関数は、

  JavaScript
自己実行関数と jQuery 拡張メソッドを参照できます

• この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注目してください。 PHP 中国語 Web サイトの他の関連記事へ!

推奨読書:

JS 自己実行関数と jQuery 拡張機能の使用方法

Require js 呼び出しの使用方法の詳細な説明

vue-resource interceptor ヘッダー情報を設定する手順の詳細な説明

以上がPopup ポップアップ ボックスはデータ イベントを追加するようにバインドされています (詳細なステップバイステップの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。