在web2py中将python数据传递给javascript

这是我的问题。我有以下功能

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();

db.define\u表(
“mylist”，
字段（'任务'，'字符串'）
)
任务：
添加

var ul=document.getElementById（“列表”）；
var-lastId=0；
函数add（）
{
如果（！isBlank（document.getElementById（“task”）.value））{
var iCon=document.createElement（'div'）；//创建一个div容器
var dbtMenu=document.createElement（'div'）；
var li=document.createElement（“il”）；//创建列表元素
var closeSpan=document.createElement（“span”）；//为badge属性创建一个span
var ClickListState=0；
setAttribute（“类”、“容器”）；
//dbtmenus.appendChild（dropDownList）；
li.setAttribute（'id'，lastId）；//为id设置属性
iCon.className=“glyphicon glyphicon remove”；//删除按钮的图像
setAttribute（“class”，“badge”）；//为span创建一个新属性
closeSpan.appendChild（图标）；//将其放入span集中
iCon.addEventListener（“单击”，function（）{var element=document.getElementById（li.getAttribute（'id'））；
element.parentNode.removeChild（element）；}）；//函数性
li.innerHTML=document.getElementById（'task'）。值；
var值=document.getElementById（'task'）。值；
var pass=document.getElementById（'task'）。值；
li.setAttribute（“类”，“列表组项悬停黄色”）；
li.addEventListener（'click'，function（）{if（ClickListState==0）{li.style.backgroundColor=“red”；ClickListState++；}
else{li.style.backgroundColor=“white”ClickListState--；}）；
li.附属物（closeSpan）；
lastId++；
ul.儿童（li）；
}
}
函数更新（）
{
{{对于行中的r:}}
var iCon=document.createElement（'div'）；//创建一个div容器
var dbtMenu=document.createElement（'div'）；
var li=document.createElement（“il”）；//创建列表元素
var closeSpan=document.createElement（“span”）；//为badge属性创建一个span
var ClickListState=0；
setAttribute（“类”、“容器”）；
//dbtmenus.appendChild（dropDownList）；
li.setAttribute（'id'，lastId）；//为id设置属性
iCon.className=“glyphicon glyphicon remove”；//删除按钮的图像
setAttribute（“class”，“badge”）；//为span创建一个新属性
closeSpan.appendChild（图标）；//将其放入span集中
图标。addEventListener（“单击”），函数（）{
var元素=document.getElementById（li.getAttribute（'id'）；
element.parentNode.removeChild（元素）；
});
//var t={{{=XML（response.json（r.task））}
li.innerHTML=“t”；
var值=document.getElementById（'task'）。值；
var pass=document.getElementById（'task'）。值；
li.setAttribute（“类”，“列表组项悬停黄色”）；
li.addEventListener（'click'，函数（）{
如果（ClickListState==0）{
li.style.backgroundColor=“红色”；
单击ListState++；
}
否则{
li.style.backgroundColor=“白色”；
单击列表状态--；
}
});
li.附属物（closeSpan）；
lastId++；
ul.儿童（li）；
{{pass}}
}
更新（）；

阅读web2py中模板语言的基本语法

你想要这个：

<ul>
    {{for row in rows:}}
        <li>{{=row}}</li>
    {{pass}}
</ul>

在视图中，只需执行以下操作：

{{=XML(task_list)}}

是一个用于封装不应包含的文本的对象 逃脱了

我将建议您仔细阅读以下两个示例：和

编辑：

在您的编辑中，我认为您希望使用表单添加新任务，并且希望在不刷新页面的情况下添加列表

Read中给出了相关的ajax示例

{{extend'layout.html'}
任务：
{{=XML（任务列表）}
jQuery（“#任务_表单”）.submit（函数（）{
ajax（{{=URL（“默认”，“插入任务”）}}，
['name']，'target'）；
返回false；
});

--

#控制器
def index（）：
rows=db（db.mylist）.select（）
my_list=[row.task for row in rows]
任务列表=UL（*我的列表）
返回dict（任务列表=任务列表）
def insert_任务（）：
“”“返回
的ajax回调”“”
任务名称=request.vars.name
db.mylist.insert（task=task\u name）
rows=db（db.mylist）.select（）
my_list=[row.task for row in rows]
任务列表=UL（*我的列表）
返回任务列表

阅读web2py中模板语言的基本语法

你想要这个：

<ul>
    {{for row in rows:}}
        <li>{{=row}}</li>
    {{pass}}
</ul>

在视图中，只需执行以下操作：

{{=XML(task_list)}}

是一个用于封装不应包含的文本的对象 逃脱了

我将建议您仔细阅读以下两个示例：和

编辑：

在您的编辑中，我认为您希望使用表单添加新任务，并且希望在不刷新页面的情况下添加列表

Read中给出了相关的ajax示例

{{extend'layout.html'}
任务：
{{=XML（任务列表）}
jQuery（“#任务_表单”）.submit（函数（）{
ajax（{{=URL（“默认”，“插入任务”）}}，
['name']，'target
# 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

{{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))
}}

<script><!--
var un_pythoned = ['', 'Not Started', 'Running', 'Finished', 'Failed'];
//--></script>