问题

图片描述

web页面进行点击删除操作后,服务端应该怎样处理的?怎样接受这个删除指令的?

解答

  1. 客户端发起一个 ajax post 请求,url 为 /post/<post_id>/delete,期待返回的数据类型为 JSON

    • post_id 为你从前端拿到的这个 post 的 id。
  2. 服务端做处理,可能包括:

    • 验证当前用户是否有模块级别权限(假如你需要);
    • 检查该 id 对应的 post 是否存在;
      • 如果不存在:返回一个 JSON 数据给前端,JSON 对象类似 {'status':404,'message':'Not Found'}。如此,前端就知道这个条目不存在。
      • 如果存在:
        • 检查当前用户是否具有条目删除权限;
          • 如果没有权限:返回类似上面的 JSON 数据,但 status 码要重写一下,好让客户端知道这是个什么类型的错误。
          • 如果有权限:将条目标记为删除状态,或者直接从库里删除。返回类似 {'status':0,'message':'success'},客户端就可以凭借 status=1 判断出了删除成功。
  3. 客户端在向服务端发起请求后,收到服务端返回的 JSON 数据,根据 status 值不同,做不同的处理。比如,假如 status 等于 1,那就代表删除成功,客户端就可以重新加载当前页面,或者利用前端技术把当前行从 table 中删除或者隐藏。

statusmessage 这些键名及其对应的值,客户端和服务端协商定义一个就好了。

Python 代码:

import json

@app.route('/post/<int:post_id>/delete')
def post_delete(post_id):
    res = {
        "status":1,
        "message":"success"
    }
    post = get_post_by_id(id=post_id)

    if not post:
        res['status'] = 404
        res["message"] = "Post Not Found"
        return json.dumps(res)

    delete_post_by_id(id=post_id)
    return json.dumps(res)

前端 html 代码(列表中删除按钮部分):

<a href="#" class="btn btn-warn btn-sm btn-delete-post" id="列表渲染时拿到的当前post 的 id ">删除</a>
<a href="#" class="btn btn-warn btn-sm btn-delete-post" id="12345">删除</a>

前端 ajax 代码:

$('a.btn-delete-post').on('click',function(evt){
    evt.preventDefault();
    var post_id = $(this).attr('id');
    $.ajax({
        url: "/post/" + post_id+ "/delete",
        type: "POST",
        dataType: "JSON",
        success:function(resp){
            if(resp.status != 1 ){
                // 不等于 1 则说明删除失败,原因有很多,具体呢,就是服务端返回的 resp.message
                alert("删除失败,原因:"+ resp.message);
            }

            // resp.status 等于 1 时,则说明成功,前端处理,此处为重新加载本页。
            location.reload()

        }
    })
})