使用Ajax内联调用PHP文件中的操作

时间:2018-02-06 00:20:24

标签: javascript php jquery ajax

我真的没有在我的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>

所以,如果那还没有让你害怕,我需要做的就是打电话给#34; delete.php&#34;通过按钮或锚链接在每一行。似乎我应该以某种方式枚举行,以便所述链接具有标识符(如,等),也许我可以使用innerhtml来读取那些id中的内容。但是,我是否创建了一个函数并将其分配给实际删除按钮的锚点?或者我是否以某种方式与每个单独的按钮在线编写动作?无论哪种方式都可能要问很多!

我调用的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排在首位。

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:0)

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

  

我需要做的是调用&#34; delete.php&#34;通过按钮或锚链接在每一行。

Bothe会奏效。但是,如果您使用链接,则必须取消其默认行为,就像使用submit事件e.preventDefault();中的click按钮所做的那样。

  

似乎我应该以某种方式枚举行,以便所述链接具有标识符(例如,等等),也许我可以使用innerhtml来读取那些id中的内容。

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

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

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

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

但是我是否创建了一个函数并将其分配给实际删除按钮的锚点?

我会为所有删除按钮创建一个事件监听器,在里面我可以使用this访问当前按钮:

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