在web2py中传递python数据给javascript
passing python data to javascript in web2py
我的问题是。我有以下函数
def index():
rows=db(db.mylist).select()
return dict(rows=rows)
所以当我重新加载前视图索引时我想从数据库中检索行并将数据以列表的形式显示给用户
{{for(r in rows)}}
li.innerhtml={{=rows.task}}
{{pass}}
显然,这不是正确的做法。我想我必须使用json和XML。
这是我正在使用的表
db.define_table(
'mylist',
Field('task', 'string')
)
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading center " style="color: black; font-style: inherit">
<form>
Task:
<input name="name" id="task" />
<button type="button" class="btn btn-success btn-sm" onclick=add(),ajax('{{=URL('default','insert_task')}}',['name']) >add</button>
</form>
</div>
<div class="panel-body center">
<ul id="list" class="list-group"> </ul>
</div>
</div>
</div>
</div>
var ul = document.getElementById("list");
var lastId=0;
function add()
{
if(!isBlank(document.getElementById("task").value)) {
var iCon = document.createElement('div'); //create a div container
var dbtMenu=document.createElement('div');
var li = document.createElement("il"); //create a list-element
var closeSpan = document.createElement("span"); //create a span for badge attribute
var ClickListState=0;
dbtMenu.setAttribute("class","container");
//dbtMenu.appendChild(dropDownList);
li.setAttribute('id',lastId); // set an attribute for id
iCon.className = "glyphicon glyphicon-remove"; // image for remove button
closeSpan.setAttribute("class", "badge"); //create a new attribute for span
closeSpan.appendChild(iCon); // put it in the span set
iCon.addEventListener("click",function(){var element=document.getElementById(li.getAttribute('id'));
element.parentNode.removeChild(element);}); //functionlity
li.innerHTML = document.getElementById('task').value;
var value=document.getElementById('task').value;
var pass= document.getElementById('task').value;
li.setAttribute("class", "list-group-item hover-yellow");
li.addEventListener('click',function() {if(ClickListState==0){li.style.backgroundColor="red"; ClickListState++;}
else {li.style.backgroundColor="white"; ClickListState--; }});
li.appendChild(closeSpan);
lastId++;
ul.appendChild(li);
}
}
function update()
{
{{for r in rows:}}
var iCon = document.createElement('div'); //create a div container
var dbtMenu = document.createElement('div');
var li = document.createElement("il"); //create a list-element
var closeSpan = document.createElement("span"); //create a span for badge attribute
var ClickListState = 0;
dbtMenu.setAttribute("class", "container");
//dbtMenu.appendChild(dropDownList);
li.setAttribute('id', lastId); // set an attribute for id
iCon.className = "glyphicon glyphicon-remove"; // image for remove button
closeSpan.setAttribute("class", "badge"); //create a new attribute for span
closeSpan.appendChild(iCon); // put it in the span set
iCon.addEventListener("click", function () {
var element = document.getElementById(li.getAttribute('id'));
element.parentNode.removeChild(element);
});
// var t ={#{=XML(response.json(r.task))}}
li.innerHTML = "t";
var value = document.getElementById('task').value;
var pass = document.getElementById('task').value;
li.setAttribute("class", "list-group-item hover-yellow");
li.addEventListener('click', function () {
if (ClickListState == 0) {
li.style.backgroundColor = "red";
ClickListState++;
}
else {
li.style.backgroundColor = "white";
ClickListState--;
}
});
li.appendChild(closeSpan);
lastId++;
ul.appendChild(li);
{{pass}}
}
update();
在这里阅读web2py模板语言的基本语法
你想要这个:
<ul>
{{for row in rows:}}
<li>{{=row}}</li>
{{pass}}
</ul>
另一种解决方案是,使用html helper在控制器函数中构建完整的列表,并将其传递给view
def index():
rows = db(db.mylist).select()
my_list = [row.task for row in rows]
task_list = UL(*my_list)
return dict(task_list=task_list)
在视图中输入:
{{=XML(task_list)}}
XML是一个对象,用来封装不应该封装的文本逃脱了。
我建议你通过这两个例子:图片博客和简单的wiki
编辑:从你的编辑,我认为你想添加新的任务使用表单,并希望添加列表,而不刷新页面。
阅读Ajax表单提交,也相关的Ajax的例子是在简单的wiki应用程序
<!-- Views/index.html-->
{{extend 'layout.html'}}
<form id="task_form">
Task:
<input name="name" id="task" />
<input type="submit" class="btn btn-success btn-sm" value="Add" />
</form>
<div id="target"> {{=XML(task_list)}}</div>
<script>
jQuery('#task_form').submit(function() {
ajax('{{=URL("default", "insert_task")}}',
['name'], 'target');
return false;
});
</script>
,
# Controller
def index():
rows = db(db.mylist).select()
my_list = [row.task for row in rows]
task_list = UL(*my_list)
return dict(task_list=task_list)
def insert_task():
"""an ajax callback that returns a <ul>"""
task_name = request.vars.name
db.mylist.insert(task=task_name)
rows = db(db.mylist).select()
my_list = [row.task for row in rows]
task_list = UL(*my_list)
return task_list
我想出了这个将python字符串列表转换为javascript字符串数组:
{{def print_js_array(left_side, pylist):
wrap_quotes = map(lambda a: "'{}'".format(a), pylist)
comma_separated = "" if not pylist else reduce(lambda a,b: "{}, {}".format(a,b), wrap_quotes)
return "{} = [{}];".format(left_side, comma_separated)
}}
{{=SCRIPT(
""
+ print_js_array("var un_pythoned", status_filter_options))
}}
给定python列表['', 'Not Started', 'Running', 'Finished', 'Failed']
的结果(html):
<script><!--
var un_pythoned = ['', 'Not Started', 'Running', 'Finished', 'Failed'];
//--></script>
使数组对后续脚本可用。您可能会编写类似于将字典打印为json的内容。
相关文章:
- 如何在上传前在浏览器中去除图像元数据(javascript)
- 从JSON对象中删除额外的括号和数据 - Javascript
- 测试两个变量是否包含一些数据 JavaScript
- 追加 POST 数据 javascript
- 通过设置SRC数据Javascript平滑淡入图像RGB
- 列出json数据javascript
- Yahoo api 从公共数据 JavaScript 切换到 oAuth
- 对恶意用户隐藏数据 JavaScript 函数
- JavaScript:如何预加载<对象>图像数据?/ JavaScript 的图像与<对象>
- 张贴base64数据JavaScript/jQuery
- 自动求和和和追加数据javascript
- 在数据Javascript上迭代时删除对象中以前的项
- 获取值数据
javascript - 获取数据javascript和推到数组Cordova
- 如何在用户单击提交按钮之前从输入框读取数据?(JavaScript)
- 在函数中传输数据?Javascript
- .filter在HTML表上不返回数据- JavaScript
- JSON数据&JavaScript(试图找到错误,可能只是语法)
- 图表数据javascript
- 不能给ajax加载的数据javascript