ホームページ > 記事 > ウェブフロントエンド > Popup ポップアップ ボックスはデータ イベントを追加するようにバインドされています (詳細なステップバイステップの説明)
Popup ポップアップ ボックスはデータ イベントを追加するようにバインドされています (詳細なステップバイステップの説明)
- php中世界最好的语言オリジナル
- 2018-04-16 14:12:313519ブラウズ
今回は、データ イベントを追加するための 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 ページを開きます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>
注: フォーム 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 のコールバック) を呼び出し、ユーザー入力データをパラメーターとして渡して、それ自体を閉じます。 -
p2ビューが
エラーメッセージ を返した場合は、popup.htmlにも表示することができます(省略)。 -
自己実行関数は、
JavaScript 自己実行関数と jQuery 拡張メソッドを参照できます - この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注目してください。 PHP 中国語 Web サイトの他の関連記事へ!
JS 自己実行関数と jQuery 拡張機能の使用方法
vue-resource interceptor ヘッダー情報を設定する手順の詳細な説明
以上がPopup ポップアップ ボックスはデータ イベントを追加するようにバインドされています (詳細なステップバイステップの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。