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";
}