Popupポップアップボックスにデータを追加する方法-jsチュートリアル-php.cn

Popupポップアップボックスにデータを追加する方法

小云云

リリース： 2018-01-20 13:37:53

オリジナル

2075 人が閲覧しました

この記事では主に 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, &#39;p1.html&#39;)

def p2(request):
 if request.method == &#39;GET&#39;:
  return render(request, &#39;p2.html&#39;)

 elif request.method == &#39;POST&#39;:
  city = request.POST.get(&#39;city&#39;)
  print(&#39;执行数据保存操作...&#39;)
  return render(request, &#39;popup.html&#39;,{&#39;city&#39;:city})

urlpatterns = [
 url(r&#39;^p1.html/&#39;, p1),
 url(r&#39;^p2.html/&#39;, 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(&#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>
</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>

ログイン後にコピー

注: ここでは、フォームの action=url パラメーターは指定されていません。ユーザーがデータを入力すると、データが送信されます。デフォルトでは現在のアドレス、つまり '/p2.html/ ' に送信され、ビュー 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 拡張メソッドを参照できます

レンダリング: