查询数据库时，从通过 getJSON 获得的列表中删除一个项目

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

到目前为止一切都很好......

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

@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 以包含一个锚标记，该标记应具有一个 data-id 属性和分配给它的 appts id。
• 在应用列表中的锚标记上创建点击事件

代码

$(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