javascript - 通过 Ajax 内联调用 PHP 文件中的操作

Question

我对 JS 确实缺乏练习，我正在尝试将“删除”机制合并到一些显示数据行的现有代码中。如果它是直接的 PHP，我不会有任何问题，但它有一些 JQuery 和其他随机的 JS 东西。代码如下:

<?php

require_once '../../app/Mage.php';
Mage::app('default');

$date = date('Y-m-d');

$read = Mage::getSingleton('core/resource')->getConnection('core_read');

$current = $read->fetchAll("SELECT * FROM offers WHERE end_date >= '".$date."' OR end_date = '0000-00-00' ORDER BY end_date DESC");
$old = $read->fetchAll("SELECT * FROM offers WHERE end_date < '".$date."' AND end_date not like '0000-00-00' ORDER BY end_date DESC");

$read->closeConnection();

?>

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>

<style type="text/css">
    body {
        background-color: #ece9e6;
    }
    .container {
        background: white;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(51,44,38,0.1);
        -moz-box-shadow: 0px 0px 10px 0px rgba(51,44,38,0.1);
        box-shadow: 0px 0px 10px 0px rgba(51,44,38,0.1);
        margin: 0px auto;
        padding: 40px;
        padding-top: 0px;
    }
    h1 {
        font-weight: bold;
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }
    .add-new {
        display: none;
        width: 275px;
        margin: 10px auto;
    }
</style>

<div class="container">
    <div class="row">
        <h1>Offers</h1>
        <p style="text-align:center;"><a href="#" id="addNew" style="color:#9a9a9a;">+ Add New Offer</a></p>
        <div class="add-new">
            <form id="add-new-form">
            Offer Name: <input type="text" name="name" id="name"/><br>
            Offer Description: <input type="text" name="description" id="description"/><br>
            Start Date: <input type="text" name="start-date" id="start-date" placeholder="YYYY-MM-DD"/><br>
            End Date: <input type="text" name="end-date" id="end-date" placeholder="YYYY-MM-DD"/><br>
            Coupon Code: <input type="text" name="coupon-code" id="coupon-code" /><br>
            Special Code: <input type="text" name="posoe-code" id="posoe-code" /><br>
            <p style="font-size: 0.8em; font-style:italic; padding:10px; margin-bottom:3px;">
                POWPromo - Product of the Week<br>
                FLASHPromo - Flash Sale<br>
                NWSLTRPromo - Newsletter Offer<br>
                HOLIDAYPromo - Holiday Promo<br>
                SUBSCPromo - New Newsletter Subscriber Promo<br>
                20-150Promo - $20 Off $50 Promo
            </p>
            Fine Print: <textarea name="fine_print" id="fine-print"></textarea><br>
            Order Minimum: <input type="text" name="order_minimum" id="order-minimum" />
            Shipping Coupon? <input type="radio" name="shipping_coupon" value="1"/> Yes &nbsp; <input type="radio" name="shipping_coupon" value="0" checked="checked"/> No<br>
            Password: <input type="text" name="password" id="password"/><br>
            </form>
            <p style="color:red; font-weight;bold; display:none;" id="error">Invalid Password.</p>
            <button class="btn btn-default submit">Submit</button>
        </div>
        <div class="span12">
            <h2 style="color:green;">Current Offers</h2>
            <table class="table table-bordered table-hover">
                <tr class="bg-success">
                    <th>Offer</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Coupon Code</th>
                    <th>Special Code</th>
                </tr>
                <?php foreach ($current as $c) { ?>
                    <tr>
                        <td style="width:50%;">
                            <p style="font-size:1.2em;"><b><?php echo $c['name']; ?></b></p>
                            <p style="font-size: 0.9em; line-height:18px;"><?php echo $c['description']; ?></p>
                            <?php if ($c['fine_print'] != '') { ?>
                                <p style="font-size: 0.7em; line-height:14px; font-style:italic; color:#9a9a9a;"><b>Fine Print: </b><?php echo $c['fine_print']; ?></p>
                            <?php } ?>
                        </td>
                        <td>
                            <?php echo date('m/d/Y', strtotime($c['start_date'])); ?>
                        </td>
                        <td>
                            <?php if ($c['end_date'] == '0000-00-00') { ?>
                                <i>Varies</i>
                            <?php } else { ?>
                                <?php echo date('m/d/Y', strtotime($c['end_date'])); ?>
                            <?php } ?>
                        </td>
                        <td>
                            <?php if ($c['coupon_code'] == '') { ?>
                                <i>Varies</i>
                            <?php } else { ?>
                                <?php echo $c['coupon_code']; ?>
                            <?php } ?>
                        </td>
                        <td>
                            <?php echo $c['special_code']; ?>
                        </td>
                    </tr>
                <?php } ?>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="span12">
            <h2 style="color:red;">Expired Offers</h2>
            <table class="table table-bordered table-hover">
                <tr class="bg-danger">
                    <th>Offer</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Coupon Code</th>
                    <th>Special Code</th>
                </tr>
                <?php foreach ($old as $o) { ?>
                    <tr>
                        <td style="width:50%;">
                            <p style="font-size:1.2em;"><b><?php echo $o['name']; ?></b></p>
                            <p style="font-size: 0.9em; line-height:18px;"><?php echo $o['description']; ?></p>
                            <?php if ($o['fine_print'] != '') { ?>
                                <p style="font-size: 0.7em; line-height:14px; font-style:italic; color:#9a9a9a;"><b>Fine Print: </b><?php echo $o['fine_print']; ?></p>
                            <?php } ?>
                        </td>
                        <td>
                            <?php echo date('m/d/Y', strtotime($o['start_date'])); ?>
                        </td>
                        <td>
                            <?php echo date('m/d/Y', strtotime($o['end_date'])); ?>
                        </td>
                        <td>
                            <?php echo $o['coupon_code']; ?>
                        </td>
                        <td>
                            <?php echo $o['special_code']; ?>
                        </td>
                    </tr>
                <?php } ?>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {

    $(document).on('click', '#addNew', function() {
        $('.add-new').toggle();
    });

    $('.submit').click(function(e) {
        e.preventDefault();
        $('#error').hide();
        if ($('#password').val() == 'somepassword') {
            $.ajax({ 
                url:'add.php', 
                type:'POST', 
                dataType: 'JSON',
                data: {
                    name: $('#name').val(),
                    description: $('#description').val(),
                    start_date: $('#start-date').val(),
                    end_date: $('#end-date').val(),
                    coupon_code: $('#coupon-code').val(),
                    posoe_code: $('#special-code').val(),
                    fine_print: $('#fine-print').val(),
                    order_minimum: $('#order-minimum').val(),
                    shipping_coupon: $('input[name="shipping_coupon"]').val()
                }, 
                success:function(data) {
                    location.reload();
                } 
            });
        } else {
            $('#error').show();
        }
    });

});
</script>

所以，如果这没有吓到你，我需要做的是通过按钮或 anchor 链接在每一行上调用“delete.php”。似乎我应该以某种方式枚举行，以便所述链接具有标识符(如 等)，也许我可以使用 innerhtml 来读取这些 id 中的内容。但是我是否要创建一个函数并将其分配给实际删除按钮的 anchor ？或者我是否以某种方式与每个单独的按钮内嵌操作？可能有很多问题要问!

我调用的 PHP 文件如下所示:

<?php

    require_once '../../app/Mage.php';
    Mage::app('default');

    // Delete offer
    if (isset($_POST['name'])) {
        $name = Mage::helper('core')->escapeHtml($_POST['name']);
        $coupon_code = Mage::helper('core')->escapeHtml($_POST['coupon_code']);
        $posoe_code = Mage::helper('core')->escapeHtml($_POST['posoe_code']);

        $write = Mage::getSingleton('core/resource')->getConnection('core_write');

        if ($coupon_code == 'Varies') {
            $write->query("DELETE FROM offers WHERE name = '".$name."', special_code = '".$special_code."'");       
        } else {
            $write->query("DELETE FROM offers WHERE name = '".$name."', coupon_code = '".$coupon_code."', special_code = '".$special_code."'"); 
        }

        $write->query("DELETE FROM coupon_reject_reason WHERE coupon_code = '".$coupon_code."'");

        $write->query("DELETE FROM special_codes WHERE coupon_code = '".$coupon_code."', special_code = '".$special_code."'");

        $write->closeConnection();
    }

    $result['success'] = true;

    echo json_encode($result);
?>

这没什么奇怪的。如果您完全熟悉 Magento(Mage 部分)，您就会知道我正在访问它的数据库功能来运行查询。尽管可能有比使用 $write-> 更好的方法。但这不是问题。真正的问题是 Ajax 位于顶部。

感谢任何帮助!

Answer 1

顶部的 Ajax 用于提交表单并调用 add.php，但您需要一个调用 delete.php 的 Ajax。既然您已经编写了第一个 Ajax，那么您应该知道如何编写第二个 Ajax。所以不会触及那部分，只会回答你的问题。

what I need to do is call a "delete.php" on every row via a button or anchor link.

两者都可以。但是，如果您使用链接，则必须取消它们的默认行为，就像在 中使用 e.preventDefault(); 使用 submit 按钮一样。点击事件。

Seems like I should enumerate the rows somehow so that said link has an identifier (like , etc.), and perhaps I could use innerhtml to read what is in those id's.

您可以这样做，但我会将 ID 存储在每个链接的 data-id 属性中。像这样的东西:

<a class="delete" href="#" data-id="<?php echo $c['id'];?>">Delete</a>

然后获取属性的值，如下所示:

$(this).data("id");

But do I create a function and assign it to an anchor for the actual delete button?

我将为所有删除按钮创建一个事件监听器，并且在内部我可以使用 this 访问当前按钮:

$(".delete").on("click", function(e){
    e.preventDefault();
    var id = $(this).data("id");
    //$.Ajax...
});