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脚本提取了按下的按钮的名称以确定下一步该做什么。在我的例子中，按钮名称以“编辑”开头，所以我只会显示相关部分。

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

防止表单实际提交＆＃34;提交＆＃34;通过重定向，只需返回＆＃34; false＆＃34;来自事件处理程序。像这样：

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

此外，您必须设置＆＃34;名称＆＃34;表单元素的属性，以便正确序列化它们。有关示例，请参阅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事件而不是提交。

发布一个没有使用AJAX jQuery重定向的表单

3 个答案: