我怎么可以重新加载它使用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"); 
    }); 

});