Question

我有一个查询数据库时获得的项目列表。查询结果由jsonify处理，最后通过getJson获得，执行以下操作：

$(function() {
    $.getJSON($SCRIPT_ROOT + '/appointments/', function(data) {
        var output="<ul>";
        for (var i in data.appts) {
            output+="<li>" + data.appts[i].labo + "</li>"
        }
        output+="</ul>";
        $("#result").html(output)                  
    return false;
  });
});

到目前为止一直很好......

现在我需要通过调用（例如）以下Flask函数来删除上面列出的每个项目：

@app.route('/appointments/<int:appointment_id>/delete/', methods=['DELETE'])
def appointment_delete(appointment_id):
    appt = db.session.query(Appointment).get(appointment_id)
    db.session.delete(appt)
    db.session.commit()
    return jsonify({'status': 'OK'})

不幸的是，我不清楚如何桥接这两段代码。由于我已经在这方面苦苦挣扎了一段时间，我将不胜感激，这将帮助我摆脱困境......非常感谢。

编辑根据@ dcodesmith的评论

getJSON回复：

{
   "appts":[
      {
         "id":1,
         "day":"Mardi",
         "labo":"l1",
         "modified":[
            "21/01/2014"
         ],
         "groups":"5",
         "plage_h":"10h00",
         "sem":"5",
         "start":[
            "28/01/2014"
         ]
      },
      {
         "id":4,
         "day":"Vendredi",
         "labo":"l1",
         "modified":[
            "22/01/2014"
         ],
         "groups":"5",
         "plage_h":"10h00",
         "sem":"5",
         "start":[
            "31/01/2014"
         ]
      }
   ]
}

Answer 1

需要更改

首先，编辑输出HTML以包含一个锚标记，该锚标记应具有分配了appts id的data-id属性。
在appts列表中的锚标记上创建点击事件

代码

$(function() {

    $.getJSON($SCRIPT_ROOT + '/appointments/', function(data) {
        var output = "<ul>";
        for (var i in data.appts) {
            var appt = data.appts[i];
            output += "<li>" + appt.labo + "<a href='#' class='delete' data-id=" + appt.id + ">delete</a></li>"
        }
        output+="</ul>";
        $("#result").html(output)                  
        return false;
    });


    $(document).on('click', 'a.delete', deleteAppt);

    function deleteAppt(e){
        e.preventDefault();
        var $this = $(this),
            id = $this.data('id'),
            url = "/appointments/" + id + "/delete/";
        $.ajax({
            url: url,
            type: 'POST',
            data: {id: id}
        })
        .done(function(data, textStatus, jqXHR){
            if (data.status === 'OK'){
            // if successful remove deleted row
                $this.parent('li').remove();
            }
        })
        .fail(function(jqXHR, textStatus, errorThrown){
            //log your error here, if any is caught. This will be very helpful for debugging
        })
    }
});

注意：我对Flask一无所知，但这应该有效 Ceteris Paribus

查询数据库后，从通过getJSON获取的列表中删除项目

1 个答案:

需要更改

代码