Popupポップアップボックスのデータ追加実装方法について-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Popupポップアップボックスのデータ追加実装方法について

小云云

Jan 02, 2018 am 09:59 AM

データに追加

この記事では主に 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 拡張メソッドを参照してください

レンダリング:

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1658

CakePHP チュートリアル

1415

Laravel チュートリアル

1309

PHP チュートリアル

1257

C# チュートリアル

1231

Related knowledge

オープンソース！ゾーイデプスを超えて！ DepthFM: 高速かつ正確な単眼深度推定! Apr 03, 2024 pm 12:04 PM

0.この記事は何をするのですか?私たちは、多用途かつ高速な最先端の生成単眼深度推定モデルである DepthFM を提案します。従来の深度推定タスクに加えて、DepthFM は深度修復などの下流タスクでも最先端の機能を実証します。 DepthFM は効率的で、いくつかの推論ステップ内で深度マップを合成できます。この作品について一緒に読みましょう〜 1. 論文情報タイトル: DepthFM: FastMonocularDepthEstimationwithFlowMatching 著者: MingGui、JohannesS.Fischer、UlrichPrestel、PingchuanMa、Dmytr

ddrescue を使用して Linux 上のデータを回復する Mar 20, 2024 pm 01:37 PM

DDREASE は、ハードドライブ、SSD、RAM ディスク、CD、DVD、USB ストレージデバイスなどのファイルデバイスまたはブロックデバイスからデータを回復するためのツールです。あるブロックデバイスから別のブロックデバイスにデータをコピーし、破損したデータブロックを残して正常なデータブロックのみを移動します。 ddreasue は、回復操作中に干渉を必要としないため、完全に自動化された強力な回復ツールです。さらに、ddasue マップファイルのおかげでいつでも停止および再開できます。 DDREASE のその他の主要な機能は次のとおりです。リカバリされたデータは上書きされませんが、反復リカバリの場合にギャップが埋められます。ただし、ツールに明示的に指示されている場合は切り詰めることができます。複数のファイルまたはブロックから単一のファイルにデータを復元します

Excelのフィルター機能を複数条件で使う方法 Feb 26, 2024 am 10:19 AM

Excel で複数の条件によるフィルタリングを使用する方法を知る必要がある場合は、次のチュートリアルで、データを効果的にフィルタリングおよび並べ替えできるようにするための手順を説明します。 Excel のフィルタリング機能は非常に強力で、大量のデータから必要な情報を抽出するのに役立ちます。設定した条件でデータを絞り込み、条件に合致した部分のみを表示することができ、データ管理を効率化できます。フィルター機能を利用すると、目的のデータを素早く見つけることができ、データの検索や整理の時間を節約できます。この機能は、単純なデータリストに適用できるだけでなく、複数の条件に基づいてフィルタリングすることもできるため、必要な情報をより正確に見つけることができます。全体として、Excel のフィルタリング機能は非常に実用的です。

Google は大喜び: JAX のパフォーマンスが Pytorch や TensorFlow を上回りました! GPU 推論トレーニングの最速の選択肢となる可能性があります Apr 01, 2024 pm 07:46 PM

Google が推進する JAX のパフォーマンスは、最近のベンチマークテストで Pytorch や TensorFlow のパフォーマンスを上回り、7 つの指標で 1 位にランクされました。また、テストは最高の JAX パフォーマンスを備えた TPU では行われませんでした。ただし、開発者の間では、依然として Tensorflow よりも Pytorch の方が人気があります。しかし、将来的には、おそらくより大規模なモデルが JAX プラットフォームに基づいてトレーニングされ、実行されるようになるでしょう。モデル最近、Keras チームは、ネイティブ PyTorch 実装を使用して 3 つのバックエンド (TensorFlow、JAX、PyTorch) をベンチマークし、TensorFlow を使用して Keras2 をベンチマークしました。まず、主流のセットを選択します

iPhoneのセルラーデータインターネット速度が遅い：修正 May 03, 2024 pm 09:01 PM

iPhone のモバイルデータ接続に遅延や遅い問題が発生していませんか?通常、携帯電話の携帯インターネットの強度は、地域、携帯ネットワークの種類、ローミングの種類などのいくつかの要因によって異なります。より高速で信頼性の高いセルラーインターネット接続を実現するためにできることがいくつかあります。解決策 1 – iPhone を強制的に再起動する場合によっては、デバイスを強制的に再起動すると、携帯電話接続を含む多くの機能がリセットされるだけです。ステップ 1 – 音量を上げるキーを 1 回押して放します。次に、音量小キーを押して、もう一度放します。ステップ 2 – プロセスの次の部分は、右側のボタンを押し続けることです。 iPhone の再起動が完了するまで待ちます。セルラーデータを有効にし、ネットワーク速度を確認します。もう一度確認してください修正 2 – データモードを変更する 5G はより優れたネットワーク速度を提供しますが、信号が弱い場合はより適切に機能します

テスラのロボットは工場で働く、マスク氏：手の自由度は今年22に達する！ May 06, 2024 pm 04:13 PM

テスラのロボット「オプティマス」の最新映像が公開され、すでに工場内で稼働可能となっている。通常の速度では、バッテリー（テスラの4680バッテリー）を次のように分類します：公式は、20倍の速度でどのように見えるかも公開しました - 小さな「ワークステーション」上で、ピッキング、ピッキング、ピッキング：今回は、それがリリースされたハイライトの1つビデオの内容は、オプティマスが工場内でこの作業を完全に自律的に行い、プロセス全体を通じて人間の介入なしに完了するというものです。そして、オプティマスの観点から見ると、自動エラー修正に重点を置いて、曲がったバッテリーを拾い上げたり配置したりすることもできます。オプティマスのハンドについては、NVIDIA の科学者ジムファン氏が高く評価しました。オプティマスのハンドは、世界の 5 本指ロボットの 1 つです。最も器用。その手は触覚だけではありません

Mijia にテレビを追加する方法 Mar 25, 2024 pm 05:00 PM

多くのユーザーは、現代生活において Xiaomi スマートホーム相互接続の電子エコシステムをますます支持しています。Mijia APP に接続した後、携帯電話で接続されたデバイスを簡単に制御できます。しかし、多くのユーザーはまだ Mijia を追加する方法を知りません。このチュートリアルガイドでは、困っているすべての人を助けるために、具体的な接続方法と手順を説明します。 1. Mijia APPをダウンロードした後、Xiaomi アカウントを作成またはログインします。 2. 追加方法: 新しいデバイスの電源を入れた後、携帯電話をデバイスに近づけて Xiaomi TV の電源を入れます。通常の状況では、接続プロンプトがポップアップ表示されます。「OK」を選択してデバイスの接続プロセスに入ります。プロンプトが表示されない場合は、スマートホーム APP に入った後、左下の 1 番目のボタンをクリックしてデバイスを手動で追加することもできます。

Alibaba 7B マルチモーダル文書理解の大規模モデルが新しい SOTA を獲得 Apr 02, 2024 am 11:31 AM

マルチモーダル文書理解機能のための新しい SOTA!アリババの mPLUG チームは、最新のオープンソース作品 mPLUG-DocOwl1.5 をリリースしました。これは、高解像度の画像テキスト認識、一般的な文書構造の理解、指示の遵守、外部知識の導入という 4 つの主要な課題に対処するための一連のソリューションを提案しています。さっそく、その効果を見てみましょう。複雑な構造のグラフをワンクリックで認識しMarkdown形式に変換：さまざまなスタイルのグラフが利用可能：より詳細な文字認識や位置決めも簡単に対応：文書理解の詳しい説明も可能：ご存知「文書理解」「」は現在、大規模な言語モデルの実装にとって重要なシナリオです。市場には文書の読み取りを支援する多くの製品が存在します。その中には、主にテキスト認識に OCR システムを使用し、テキスト処理に LLM と連携する製品もあります。

See all articles

Popupポップアップボックスのデータ追加実装方法について

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック