今回は、データ イベントを追加するための 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), ]
<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>
2.
コールバック関数を定義します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>
<head> <meta charset="UTF-8"> <title>正在返回</title> </head> <body> <script> (function (city) { window.opener.callback(city); window.close(); })("{{ city }}") </script> </body>
p2ビューが
エラーメッセージ自己実行関数は、
JavaScriptJS 自己実行関数と jQuery 拡張機能の使用方法
vue-resource interceptor ヘッダー情報を設定する手順の詳細な説明
以上がPopup ポップアップ ボックスはデータ イベントを追加するようにバインドされています (詳細なステップバイステップの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。