我怎麼可以重新加載它使用jQuery .load功能

Question

嗨，我使用jQuery .load（），如下面的例子加載一個頁面中的div容器加載特定頁面：

jQuery("#ShowOrders").load("saveOrder.php?totalAmount=100"); 

此頁我」由內要去處理價值清單。

對於價值觀我要去像下面執行js函數裏面的刪除操作的那些名單，

​​3210

我能不能夠刪除的記錄在數據庫中，即使我能能刪除這個我有更大的問題來重新加載這個特殊的div來顯示更新。

我需要

1. 幫助使用SQL的內部JS
2. 重裝使用jQuery .load（）函數加載的頁面。
3. 我可以在其中處理ajax嗎？ （如果是的話，請爲我提供一種方法。）

Answer 1

你不能在js中運行sql。假設你有一個saveOrder.php和removeOrder.php文件的腳本文件。這些文件應該包含你的sql查詢和邏輯，以html字符串的形式返回結果。下面是你如何構建你的javascript和處理你的ajax請求的例子：

$(function() { 
    var jqxhr = $.ajax({ 
     url: 'saveOrder.php', 
     type: 'POST', 
     dataType: 'html', // data type you are expecting to be returned 
     // data you are passing into your saveOrder.php script that runs your sql 
     // queries and other logic and returns the result as html 
     data: { 
      totalAmount: 100 
     } 
    }); 

    // on ajax success 
    jqxhr.done(function(html){ 
     console.log("success. order has been saved"); 
     // assuming saveOrder.php returns html 
     // append your list here 
     $("#someDiv").empty(); 
     $("#someDiv").append(html); 

     // assuming your list contains a delete button with 
     // a data attribute of data-id and where data-id value is the id 
     // sql record id you can do the following 

     $(".list-item").each(function(index, el) { 
      var deleteBtn = $(el).find("#delete"); 

       deleteBtn.on('click', function(event) { 
        event.preventDefault(); 

        // id of the record being deleted 
        // capatured from: 
        // <button data-id="25">Delete</button> 
        var id = $(this).data(id); 

        // here you can run another ajax call 
        var jqxhr = $.ajax({ 
         url: 'removeOrder.php', 
         type: 'POST', 
         dataType: 'html', 
         data: { 
          id: id 
         } 
        }); 

        // second ajax successful 
        jqxhr.done(function(html){ 
         console.log("order removed"); 

         // append the updated list 
         $("#someDiv").empty(); 
         $("#someDiv").append(html); 

        }); 

        jqxhr.fail(function(){ 
         console.log("Second Ajax Failed"); 
        }); 
       }); 

     }); 

    }); 

    jqxhr.fail(function(){ 
     console.log("First Ajax Failed"); 
    }); 

});