收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Popup彈出框添加數據實現方法

本文實例為大家分享了Popup彈出框添加數據的具體代碼,供大家參考,具體內容如下

邏輯

窗口P1中顯示一組數據,并提供一個添加按鈕
點擊按鈕,彈出新的瀏覽器窗口P2,在其中添加一條數據并提交后,窗口P2自動關閉
新添加數據動態添加到窗口P1中并被選中
所需知識:JS BOM 窗口對象;JS自執行函數

實現

下面在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/',提交到視圖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中的callback),并把用戶輸入數據作為參數傳入;關閉自身。 如果p2視圖返回錯誤信息,也可以在popup.html中作顯示(略)。 自執行函數可以參考 JavaScript 自執行函數和 jQuery擴展方法

效果圖:

查看圖片

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

JavaScript自執行函數和jQuery擴展方法詳解
我們通常將JS代碼寫在一個單獨的JS文件中,然后在頁面中引入該文件。但是,有時候引入后會碰到變量名或函數名與其它JS代碼沖突的問題。那么如何

JavaScript中Require調用js的實例分享
在我最初開始寫JavaScript函數時,通常是這樣的:functionfun1(){//somecodehere}functionfun2(){//someothercodehere}...函數全寫在全局環境中,項目很小時,通常不會有

JS+CSS實現網頁加載中的動畫效果
本文實例為大家分享了JS實現網頁加載中效果的具體代碼,供大家參考,具體內容如下需要材料:一張loading動畫的gif圖片基本邏輯:模態框遮罩+loading.gi

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 用佳永配资可以吗? 北京十一选五一定牛北京选五一定牛 海南飞鱼彩票的技巧 股票推荐可靠吗 贵州茅台股票 查湖北十一选五开奖结果 香港彩票论坛 天津时时彩是几点开奖 福建十一选五开奖号码是多少 股票指数技术分析 福建快3开奖号码昨天 HR娱乐app 甘肃11选5中奖助手 今日股票推荐今日股票推荐黑马 七星彩连线带坐标图 河南11选5