Ajax Jquery 表單提交

Question

您好，我正在使用 ajax 運行表單，使用 PHP 提交函數，下面是我的代碼

提交.php

<?php 
if(isset($_POST['add_data'])){
    echo "add id";
}
if(isset($_POST['update_data'])){
    echo "update_id";
}
?>

表單.js

$('form.data').on('submit',function(){
    var info = $(this),
        url = info.attr('action'),
        method = info.attr('method'),
        data = {};

    info.find('[name]').each(function(index, value){
        var info= $(this),
            name = info.attr('name'),
            value = info.val();
        data[name] = value;
    });

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response){
            console.log(response);
            //refresh total
        }
    });
    return false;
});

表格.php

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button name="add_data" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>
<button name="update_data" value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

但是，如果我單擊控制台回復的按鈕之一，我得到的結果是不正確的： add idupdate_id

而不是以下add id或update_id之一

Answer 1

在提交時，您將設置值，因此isset將始終返回 true。 你必須做的是：

if(!empty($_POST['add_data'])){
    echo "add id";
}

Answer 2

問題是您的表單同時包含 add_data 和 update_data，因此它們將始終設置在$_POST中。 如果您想為每個按鈕執行不同的操作，您可以將 function 分配給兩個按鈕的onClick事件，檢查導致事件的原因並將其傳遞給您的 AJAX 數據。

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button name="add_data" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>
<button" name="update_data" value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

然后在你的 JS 中：

$("button").click(function(){
 var info = $(this),
    url = info.attr('action'),
    method = info.attr('method'),
    data = {};

info.find('[name]').each(function(index, value){
    var info= $(this),
        name = info.attr('name'),
        value = info.val();
    data[name] = value;
});
data["action"] = ($(this).attr("name") === "add_data") ? 0 : 1; //If add_data -> 0 else -> 1

$.ajax({
    url: url,
    method: method,
    data: data,
    success: function(response){
        console.log(response);
        //refresh total
    }
});
return false;
});

然后在您的 PHP 中，查找$_POST["action"]變量

if($_POST["action"] == 0) {
echo "add_data";
} else {
echo "update_data";
}

編輯：如果您願意，您不必在條件中檢查它，只需將 name 屬性傳遞給data["action"] ，然后檢查 PHP，如果$_POST["action"]等於add_data 或 update_data

Answer 3

使用下一個代碼來分隔您的按鈕操作：

HTML：

<form method="POST" action="submit.php" class="data">
<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
<button value="add" class="btn btn-label-success btn-sm mg-y-5"><i class="fa fa-link"></i>Add</button>
<button value="update" class="btn btn-label-warning btn-sm mg-y-5"><i class="fa fa-link"></i> Update</button>
</form>

JS：

$('form.data > button').on('click',function(){
    var info = $(this).parent(),
        url = info.attr('action'),
        method = info.attr('method'),
        task = $(this).val(),
        data = {};

    info.find('[name]').each(function(index, value){
        var info= $(this),
            name = info.attr('name'),
            value = info.val();
        data[name] = value;
    });
    data['task'] = task;

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response){
            console.log(response);
            //refresh total
        }
    });
    return false;
}); 

PHP：

if(isset($_POST['task']) && $_POST['task'] == 'add'){
    echo "add id";
}
if(isset($_POST['task']) && $_POST['task'] == 'update'){
    echo "update_id";
}