发布表单而无需使用AJAX jQuery进行重定向

Question

自数小时以来，我一直在尝试使用AJAX提交表单，以免刷新或重定向页面。

我使用此代码提交：

 $('#files').on(submit, function(e) { e.preventDefault(); $.ajax({ url:'actions.php', type:'post', data:$(this).serialize(), success:function(){ console.log('sent'); }, error:function(){ console.log('not sent'); } }); }); 

但是，我注意到序列化表格时什么也没有。 它只是空白。 我提交了表单，然后一个PHP脚本获取了按下按钮的名称，以确定下一步该怎么做。 在我的示例中，按钮名称以“ edit”开头，因此我仅显示相关部分。

else if (substr($index, 0, 4) == "edit") {
    $q = "UPDATE files SET file_name = '" . $_POST[$index] . "', file_path = 'users/" . $_SESSION['username'] . "/" . $_POST[$index] . "'" . " WHERE id = " . $file_id;
    mysqli_query($link, $q);
    rename('users/'.$_SESSION['username'].'/'.$filename, 'users/'.$_SESSION['username'].'/'. $_POST[$index]);
    echo(json_encode(array('success'=>true)));
}

当我不使用e.preventDefault()时，它将保持重定向，并且在我不提交任何内容时。

编辑：这是HTML

 <td> <span name="edit22" contenteditable="true">fake</span> <div> <span> <button type="submit" name="edit22" form="files" value="fake"> <i class="fa fa-check" aria-hidden="true"></i> </button> </span> <span> <button> <i class="fa fa-times" aria-hidden="true"></i> </button> </span> </div> </td> 

fa fa-check按钮（带有javascript）将第一个<span>元素的内容视为价值。

我在哪里做错了？

Answer 1

为了防止表单通过重定向实际“提交”，只需从事件处理程序中返回“ false”即可。 像这样：

$("#files").submit(function (e) {
    return false;
});

另外，必须设置表单元素的“名称”属性才能正确序列化它们。 有关示例，请参阅https://jsfiddle.net/ccsCoder/fyyd7mfw/3/ 。

因此，您的提交处理程序应如下所示：

$("#files").on("submit", function(e) {
    $.post("action.php", $(this).serialize(), function(data) {
        console.log("success"); //do something with data
    }, function(error) {
        console.log("Failed!");
    });
    return false;
});

这是完整的代码段： https : //jsfiddle.net/ccsCoder/fyyd7mfw/3/

Answer 2

为什么不重新排列您的代码使其像这样

    function onClick()
{
    $.ajax({
        url:'actions.php',
        type:'post',
        data:$('#FormID').serialize(),
        success:function(){
            console.log('sent');
        },
        error:function(){
            console.log('not sent');
        }
    });
}

将HTML更改为如下所示

<td>
    <span name="edit22" contenteditable="true">fake</span>
    <div>
        <span>
            <button type="button" name="edit22" form="files" value="fake" onClick='javascript:onClick();'>
                <i class="fa fa-check" aria-hidden="true"></i>
            </button>
        </span>
        <span>
            <button>
                <i class="fa fa-times" aria-hidden="true"></i>
            </button>
        </span>
    </div>
</td>

Answer 3

或只使用<input type="button" />而不是<input type="submit" /> 。 如果您使用表单行为，您甚至可以将其设置为表单的默认操作。 我发现最好不要这样做，如果有多个必填字段，则只需单击即可。 从那里开始，您将只使用click事件而不是Submit。