django實戰（三）--刪除和批量刪除

上一節咱們完成了帶分頁的模糊查詢，本節咱們繼續刪除操做。javascript

一樣的，先給出各個模塊的代碼（上一節的就不在貼出了）：
urls.pycss

path('curd/delete/',views.curd_delete,name='curddelete'), path('curd/deleteall/',views.curd_delete_all,name='curddeleteall')

views.pyhtml

def curd_delete(request): #從前端(html)獲取did數據
    did=request.GET.get('did') if did: #找到該數據，將其刪除
        Book.objects.get(id=did).delete() #刪除成功，返回顯示頁
        return redirect('/curd/') def curd_delete_all(request): #先判斷髮過來的是不是post請求
    if request.method=="POST": #獲得要刪除的id列表
        values=request.POST.getlist('vals') for i in values: #若是id不爲空，獲取該字段，並將其刪除，咱們只刪除book表，publisher表不變
            if i != '': book_obj = Book.objects.get(id=i) book_obj.delete() #刪除成功返回顯示頁
        return redirect('/curd/')

curd.html前端

使用js前記得導入相應的文件，這裏我使用的是百度源java

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="/static/js/curd.js"></script>
    <style> .myul li{ list-style: none; margin-right: 4px; margin-bottom: 4px; float: left; } </style>
    <title>Document</title>
</head>
<body>
<div style="width: 100%;">
    <h3 align="center">書籍列表</h3>
    <table class="table" style="table-layout: fixed;">
        <div>
            <div style="float: left">
                <ul class='myul'>
                    <li><a onclick="getValues()" href="" class="btn btn-danger input-sm">批量刪除</a></li>
                    <li><a href="" class="btn btn-info input-sm">添加</a></li>
                </ul>
            </div>
            <div style="float: right">
                <form  method="get" action="" >
                    <input type="text" name="query"/>
                    <input type="submit" value="查詢" name="submit" class="btn btn-primary input-sm"/>
                </form>
            </div>
        </div>
        <tr>
            <th width="25"><input type="checkbox" id="checkAll"  onclick="checkAll()"></th>
            <th>id</th>
            <th>title</th>
            <th>publisher</th>
            <th>introduce</th>
            <th>操做</th>
        </tr>
        <tr> {% for item in page%} <td><input type="checkbox" onclick="checkOne()" value="{{item.id}}" name="item"></td>
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.publisher}}</td>
            <td>{{item.introduce}}</td>
            <td><a onclick="return confirm('確認要刪除？')"  class="btn btn-danger input-sm" href="/curd/delete/?did={{item.id}}">刪除</a></td>
        </tr> {% endfor %} </table>
</div>
<!--底部分頁按鈕顯示-->
<div style="position: absolute;top: 30 %;left: 44%">
    <nav aria-label="Page navigation">
        <div class="pagination">
            <ul class="pagination" > {% if page.has_previous %} <li><a href="/curd/{{page.previous_page_number}}?query={{query}}"   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span></a></li> {% endif %} {% for num in page.paginator.page_range%} {%if pindex == page.number%} <li><a href="">{{ num }}</a></li> {%else%} <li><a href="/curd/{{num}}?query={{query}}">{{ num }}</a></li> {%endif%} {% endfor %} {% if page.has_next %} <li><a href="{% url 'person:curdindex' page.next_page_number%}?query={{query}}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span></a></li> {% endif %} </ul>
        </div>
    </nav>
</div>
</body>
</html>

curd.jsjquery

function checkAll() { var all = document.getElementById("checkAll"); if (all.checked == true) { var ones = document.getElementsByName("item"); for (var i = 0; i <= ones.length; i++) { ones[i].checked = true; } } else { var ones = document.getElementsByName("item"); for (var i = 0; i <= ones.length; i++) { ones[i].checked = false; } } } function checkOne() { var one=document.getElementsByName("item"); one.checked=true; } function getValues() { var valArr=[]; var ones=document.getElementsByName('item'); for (var i=0;i<ones.length;i++){ if (ones[i].checked==true){ valArr[i]=ones[i].value } } if (valArr.length!=0){ // var vals = valArr.join(','); // alert(valArr); $.ajax({
　　　　　　　#地址必定要正確 url:"deleteall/",
　　　　　　　#所有大寫 type:'POST', contenType:'application/json',
　　　　　　　#不加這個，ajax會將結果後邊加個[]，例如{'vals[]':[4,6,8]} traditional:true,
　　　　　　 #不加這個，會報服務器終止了一個在運行的程序 async: false, data:{ 'vals':valArr }, success:function(){ alert("刪除成功"); }, error:function(){ alert("刪除失敗"); } }) } else { var error_m="請選擇數據"; alert(error_m); } }

最後啓動服務器：
ajax

咱們跳轉到最後一頁，django

點擊刪除：json

點擊肯定。這一條數據就被刪除了。總共就只有三頁數據了，咱們仍然跳轉到最後一頁：選擇21,25，點擊批量刪除：（也能夠點擊id前面的多選框，實現全選）bootstrap

具體流程：點擊多選框--調用onclick中的函數（位於js）--獲得要刪除的id列表--將數據封裝並經過ajax請求傳給後端--後端接受請求並解析數據，對每個id所在數據進行刪除--刪除成功返回顯示界面。

刪除成功後：

技術總結：一步一步的進行實現，首先是單條記錄的刪除，這還挺簡單，將每條記錄的id傳給url地址，而後後臺利用get請求獲取便可。批量刪除就比較麻煩了，從多選框的加入-->(全選和全不選-->部分選取（這兩部分用js便可）)-->如何將js中的值傳給後端(利用ajax發送請求(期間也遇到很多問題))-->後端獲得值並進行刪除-->返回給前端。一步一步的走過來，總會遇到很多坑（我都會慢慢總結在另外一篇博客《django勘誤中》）。總而言之，遇到問題不要慌張，多百度，查找解決問題的方法，另外，有的問題或者方法不可能和本身的徹底同樣，要學會變通。

從html-css-js-ajax-django，學得越多，越是理解知識的界限是無窮的。

下一節：對數據進行編輯。

原文出處：https://www.cnblogs.com/xiximayou/p/11792875.html