在web2py中传递python数据给javascript

passing python data to javascript in web2py

本文关键字:数据 javascript python web2py      更新时间:2023-09-26

我的问题是。我有以下函数

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的内容。