如何使用2个按钮创建ajax查询?

时间:2015-04-30 11:51:19

标签: php ajax

我有一个带有两个按钮的标准表单,当你点击任何一个按钮时,如果用if语句检测到按钮,那么。

<?php

include('db_config.php');

if (isset($_POST['update'])) {
    $qty = $_POST['qty'];
    $id  = $_POST['id'];


    $sql = "UPDATE orders SET qty=? WHERE id=?";
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($qty,$id));

    header('Location: ../order.php');
}

if (isset($_POST['delete'])) {
    $id = $_POST['id'];

    $sql = "DELETE FROM orders WHERE id=?";
    $stmt = $conn->prepare($sql);
    $stmt->execute(array($id));
}

?>

这是我的表格:

<div class="col-sm-4 col-md-4">
    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
        <div class="content-boxes-text">
            <form action="php/edit.php" method="post" class="form-inline pull-right editremove-form">    
                <h3>' . $row['itemName'] . '</h3>
                <h4>Total Price: $'.$row['price'].'</h4>    
                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                <p>Our best seller.  Full of flavour.</p>
                <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Qty</label>
                <div class="input-group">
                <input type="number" name="qty" class="form-control" class="qtyitem" value="' . $row['qty'] . '">
                </div>
                </div>
                <input type="hidden" class="itemid" name="id" value="'.$row['id'].'">
                <button type="submit" id="updatebtn" name="update" class="btn btn-primary">Update</button>
                <button type="submit" id="removebtn" name="delete" class="btn btn-primary">Remove</button>
            </form>
        </div>
        <!-- //.content-boxes-text -->
    </div>
    <!-- //.content-boxes -->
</div>

我不确定如何将提交按钮名称传递给php文件,或者是否可以这样做?

我的阿贾克斯:

$(".editremove-form").on("submit",function(event){
                        event.preventDefault(); 
                        $.ajax({
                                 type: "POST",
                                 url: "php/edit.php",
                                 data: {
                                          id: $(this).find(".itemid").val(),
                                          qty: $(this).find(".qtyitem").val()
                                 },
                                 success: function(data)
                                 {
                                    $.ajax({
                                            type: 'POST',
                                            url: 'php/refreshproduct.php',
                                            data: {dateorderpicker: $('.date-picker').val()},
                                            dataType: 'JSON',
                                            success: function(data)
                                            {
                                                $("#cartrow").html(data.result_1);
                                                $("#otheritems").html(data.result_2);
                                            }
                                    });
                                 }
                            });
                    });

由于

3 个答案:

答案 0 :(得分:4)

尝试:

<button type="submit" id="updatebtn" name="action" value="update" class="btn btn-primary">Update</button>
<button type="submit" id="removebtn" name="action" value="remove" class="btn btn-primary">Remove</button>

然后在您的PHP代码中,您可以使用:

if($_post['action'] == "update"){
    //
}elseif($_post['action'] == "remove"){
    //
}

如果你使用jQuery Ajax,你应该这样做:

$("button[name=action]").click(function(){
    var data = {action: $(this).val()}; // and anything else you want to send
    $.ajax({
        url: "/url",
        type: "post",
        data: data,
        success: function(data){
            //
        }
    });
}); 

答案 1 :(得分:1)

我同意Mani的回答“使用输入而不是按钮”。 创建一个ajax,为你的表单制作一个ID或一些标识,以便你可以识别你的表格。

你的表格:

<div class="col-sm-4 col-md-4">
    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
        <div class="content-boxes-text">
            <form action="php/edit.php" method="post" class="form-inline pull-right editremove-form" id="myFormID">    
                <h3>' . $row['itemName'] . '</h3>
                <h4>Total Price: $'.$row['price'].'</h4>    
                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                <p>Our best seller.  Full of flavour.</p>
                <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Qty</label>
                <div class="input-group">
                <input type="number" name="qty" class="form-control" class="qtyitem" value="' . $row['qty'] . '">
                </div>
                </div>
                <input type="hidden" class="itemid" name="id" value="'.$row['id'].'">
                <input type="submit" id="updatebtn" name="update" class="btn btn-primary" value="Update">
                <input type="submit" id="removebtn" name="delete" class="btn btn-primary" value="Remove">
            </form>
        </div>
        <!-- //.content-boxes-text -->
    </div>
    <!-- //.content-boxes -->
</div>

你的ajax代码:

$("#myFormID").submit(function(f){
    f.preventDefault(); // prevent page to load when submitting our form

    // post request
    $.post(
        'to_your_post_URL.php', 
        $(this).serialize(), // serialize form data
        function(){
            // do more after sending data
        }
    )
})

注意:确保包含jQuery

我希望它会有所帮助

答案 2 :(得分:0)

使用输入类型作为提交而不是按钮,它可能在某种程度上帮助你。

<input type="submit" id="updatebtn" name="action" value="update" class="btnbtn-primary">Update</input>
<input type="submit" id="removebtn" name="action" value="remove" class="btn btn-primary">Remove</input>