javascript - 我如何重新加载使用 jquery .load 函数加载的特定页面

Question

您好，我正在使用 jquery .load() 在 div 容器中加载页面，如下例所示:

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

在此页面内，我将处理值列表。

对于这些值列表，我将在 js 函数中执行删除操作，如下所示，

function removeOrder(sId)
{
var ServiceId = parseInt(sId);
var OrderId = parseInt("<?php echo $_POST['OrderId']; ?>");
alert("ServiceId "+ServiceId+" SessionOrderId "+OrderId);
if(confirm("Are you sure?") == true)
{
  var DeleteIt = "<?php include 'connect.php'; $DeleteOrderDetailsQuery = 'DELETE FROM tblshoppingdetails WHERE orderID = "+OrderId+" AND serviceTypeID = "+ServiceId+"';$ExeDeleteOrdersQuery = mysqli_query($con,$DeleteOrderDetailsQuery);if($ExeDeleteOrdersQuery) { echo '1'; } else { echo $DeleteOrderDetailsQuery; } ?>";
}
alert(DeleteIt);
if(DeleteIt == 1)
{
  alert("Success");
}
}

我无法删除数据库中的记录，即使我能够删除它，我在重新加载这个特定的 div 以显示更新时遇到了更大的问题。

我需要帮助

1. 在 js 中使用 sql
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");
    });

});